HTML言語の最新バージョンとして、現在標準化作業が進められている「HTML5」。はてなブックマークでもこのキーワードを目にする機会が増え、「HTML5って何?」と疑問に思っている人も多いのではないでしょうか。今回は、「HTML5って何?どんなことができるの?」という疑問にお答えしたいと思います。
■HTML5でできること
まずは、HTML5を使うと具体的にどんなことができるのかを見ていきましょう。
<具体的に何ができるの?>
▽HTML5.JP - 次世代HTML標準 HTML5情報サイト
▽HTML5とは?変わるWebと注目の新要素 HTML5.0の情報サイト
▽大幅に進化した次世代 HTML 規格「HTML5」とは? - japan.internet.com Webビジネス
▽HTML5, きちんと。
▽めざましTech - HTML5 についての Q&A
▽2010年に勧告される「HTML5」は「HTML4」と何が違うのか? - GIGAZINE
▽iPhone/Android版GmailがHTML5を利用 | Web標準Blog | ミツエーリンクス
HTML5の特徴の一部としては、次のような項目が挙げられます。
- 文章の構造化が進み、検索エンジンなどに対してページの内容をより明確に伝えられるようになる。
- 動画や音声データの公開もより便利に。
- オフラインでもWebサイトのデータ閲覧が可能に。
まず大きな特徴として挙げられるのが、ページの内容をより明確にコンピュータに伝えるための「文章の構造化」が進むという点です。これまでWebサイトのレイアウトといえば、tableタグやdivタグとCSSの組み合わせによるものが主流でした。ヘッダーとなる部分は<div id=”header”>、フッターとなる部分は<div id=”footer”>といった記述の仕方が一般的でしたが、HTML5では<header>や<footer>といった要素が新たに追加されます。レイアウトにこれらのタグを利用することで、「<header>と</header>で囲まれた箇所はヘッダー部分である」とコンピュータ側が認識するようになり、ページ内の文章構造をより明示的に表すことができます。ヘッダーやフッター以外にも、文章などのセクションを定義する「section要素<section>」や、ナビゲーションエリアを定義する「nav要素<nav>」などがあります。
そして今やWebサイトには欠かせない「動画・音声」といったマルチメディアコンテンツについても、HTML5ではより簡単に扱えるようになります。これまでFlashやAjaxの技術が必要だった機能についても、HTML5とJavaScriptのみで実現が可能になり、画像を貼る<img>タグのように、<video>や<audio>といったタグによって動画や音声をページに埋め込むことができます。
また、既存のブラウザではできなかったデータをブラウザ上に保存する機能や、ネットワークに接続していない環境でもWebサイトの表示をサポートする機能も、HTML5の大きな特徴と言えます。オンラインからローカルに保存しておくことで、ネットワークに繋がっていなくても必要なデータを閲覧することが可能になり、実際にGmailのWeb版でもこれらの機能を生かし、ネットワークに繋がっていない状態でもiPhoneからメールを閲覧できるようになっています。
<Googleが語るHTML5>
▽グーグルが賭けるHTML 5の未来 − @IT
▽【レポート】5分で把握するHTML5 - Google Developer Dayセッションリポート (1) HTML5仕様の概要 | エンタープライズ | マイコミジャーナル
▽Google Japan Blog: HTML5 コミュニティ発足のお知らせ
「HTML5によって、Webをアプリケーションプラットフォームとして利用できるようになる。」と語るGoogle。そんなGoogleがHTML5で実現可能になる新機能について紹介するエントリーがこちらです。
中でも注目なのが「canvas要素」。JPEGやGIFといった画像ファイルを用意しなくても、幅と高さを指定した<canvas>タグを定義すれば、JavaScriptを使って矩形や円などの図形も自由に描写することができます。
▽Canvasとは - Canvas - HTML5.JP
▽ASCII.jp:HTML5先取り!CanvasならFlash不要で絵が描ける
▽HTML5 Canvasのチートシート | コリス
<もっと詳しく知りたい!>
▽HTML5 を学ぶための情報源まとめ | WWW WATCH
「HTML5についてもっと詳しく知りたい!」という人は、参考になるサイトがまとめられたこちらのエントリーもオススメです。
■HTML5でどんなページが作れるのか見てみよう!
HTML5でできることが分かったら、実際にどんなページが作れるのか見てみたいですよね。続いては、そんな時に参考にしたいエントリーです。
<HTML5で構築されたサイト>
▽デザイナーのためのHTML5リソースまとめ | DesignWalker
▽HTML5 Gallery | A showcase of sites using HTML5 markup
▽ HTML5 で試しに Web ページを組んでみた (改訂版) - VERSIONFIVE
HTML5で構築されたサイトを紹介するエントリーがこちらです。canvasやaudioといった新要素を使ったサイトのほか、印刷して使えるチートシートなどもあります。
<HTML5版のYouTubeって?>
▽YouTube HTML5 Demo
▽YouTube、HTML5動画プレーヤーをテスト公開 - ITmedia News
こちらの「YouTube HTML5 Video Player」では、Flashを使わず、HTML5のvideo要素とJavaScriptによってYouTubeでの動画再生を可能にしています。再生には、Google Chrome、Safari、ChromeFrameプラグインをインストールしたInternet Explorerのいずれかのブラウザが必要になります。
<HTML5のサンプル集>
▽HTML5サンプル集 - 株式会社あゆた
ドラッグ&ドロップAPIやフォーム、video要素など、HTML5で実現する様々な機能のサンプルがまとめられています。
HTML言語として実に10年以上ぶりにバージョンアップされるのが今回のHTML5。新しい要素もたくさん追加され、「こんなことまでHTMLでできるの?」というような機能もあったのではないでしょうか。正式な勧告は2012年頃と言われています。引き続き、今後の動向に注目したいですね。HTML5に関する話題は、はてなブックマークのタグ「HTML5」からもどうぞ。
タグ「HTML5」を含む新着エントリー - はてなブックマーク