大幅に進化した次世代 HTML 規格「HTML5」とは？

2009年7月、Web 標準化団体である W3C は、これまで HTM L規格として策定を進めていた XHTML2の策定作業を終了し、今後は HTML5にリソースを注力することを発表した。そこで本稿では、今注目を集めている次世代 HTML 規格 HTML5の特徴を解説すると共に、Web ブラウザの対応状況や Web 業界を牽引する Google の取り組みについて紹介したいと思う。

■HTML5の特徴
HTML5は、現在広く使われている（X）HTML と比較し、より構造化言語としての性格を強め、Web アプリケーション開発向け機能を兼ね備えるなど、大幅な改良が加えられている。大きな特徴としては以下の点が挙げられる。

・セマンティックな構造化言語へと進化
・フォーム機能の大幅な強化
・Web アプリケーション開発向け機能の強化

では、詳細を1つずつ紹介しよう。

●セマンティックな構造化言語へと進化
HTML5では情報を構造化するための新しい要素や属性が追加されている。

例えば、以下の要素などが挙げられる。

・文章などのセクションを定義する「section 要素」
・ヘッダエリアを定義する「header 要素」
・フッタエリアを定義する「footer 要素」
・ナビゲーションエリアを定義する「nav 要素」

現在の（X）HTML の仕様ではヘッダやフッタ、ナビゲーションなどのグループエリアは、グループ化要素である div 要素に id 属性などの識別子を指定し「擬似的」にグループエリアを表現することが多い。具体的には、ヘッダエリアを表現する場合は <div id="header"> や <div id="head">、ナビゲーションエリアを表現する場合には <div id="navi"> や <div id="side_navi"> などといった具合だ。

しかし、検索エンジンなどの機械は、この「規則性の無い属性値が与えられた擬似的なグループエリア」を正しく識別することや、情報の持つ意味までを理解することができない。

だが、HTML5では文章構造を明確に識別するための要素が追加されたことで、検索エンジンなどの機械に対し、Web サイトの構造を明確に伝えることができるようになるのだ。

●フォーム機能の大幅な強化
HTML5では、問い合わせや商品購入などでユーザーが情報を入力する際に用いるフォーム機能が、大幅に強化されている。

例えば、以下のような強化点が挙げられる。

・必須入力フィールドかどうかを指定することができる「required 属性」
・未入力のテキストフィールドに、文字入力の手助けとなる文字列をあらかじめ表示できる「placeholder 属性」
・入力を開始する箇所を自動的にフォーカスすることができる「autofocus 属性」

これらの機能は、これまで JavaScript を用いることによって実装が可能であったが、HTML5では input 要素などに属性値を加えるだけで「痒い所に手が届く入力フォーム」の実装が可能となるのだ。

これらの機能が実装された入力フォームは、ユーザーの入力作業を手助けするばかりではなく、Web サイトからの離脱を防ぐ効果にも繋がると考えられる。

●Web アプリケーション開発向け機能の強化
HTML5の最も大きな特徴として、Web アプリケーションの開発を容易とするための要素や JavaScript API が用意されたことが挙げられる。

例えば、2D・3Dグラフィックの制作を実現する API や、ドラッグ＆ドロップ操作が実現できる API、ビデオやオーディオ再生のための API など、これまで Flash や Ajax を用いて実装していた機能が、HTML5と JavaScript API のみで実現できるようになるのだ。

一例として、Google では動画サイト YouTube にて実験的なデモサイト「YouTube HTML5 Demo」を公開している。現在、YouTube では Flash Player を利用し動画閲覧が行なえるが、このデモサイトでは HTML5で新たに追加された video 要素と JavaScript の組み合わせのみで動画閲覧が行なえる。

この試みは HTML5の持つ可能性を最大限に表現した好例と言えよう（「YouTube HTML5 Demo」の閲覧は後に説明する HTML5対応ブラウザで可能だ）。

このように、これまで様々なプラグインを必要とした Web アプリケーションの閲覧などが、HTML5と JavaScript API の組み合わせのみで実現可能となるのだ。つまり、情報発信者はユーザーの環境に依存することなく、表現力豊かで操作性に優れた情報提供ができるようになると言える。

■Web ブラウザの対応状況について
2009年10月現在、Firefox3.5や Safari4、OPERA9.6、GoogleChrome2.0などの先進的なブラウザでは HTML5の一部機能が実装されている。しかし、世界最大のブラウザシェアを誇る Internet Explorer（以下 IE）ではサポートが行われていないのが現状だ。

IE で HTML5を実装するためには、JavaScript を用いて新しい要素を追加する必要がある。以下は JavaScript を用いて新しい要素を追加する場合の記述例である。参考にしていただきたい。

▼HTML の head 要素内に直接 JavaScript を記述したサンプル

<!--[if IE]>
<script type="text/javascript">
document.createElement（"section"）;
document.createElement（"header"）;
document.createElement（"当該箇所に追加したい要素名を記述"）;
・
・
</script>
<![endif]-->

※ script 要素を用いて JavaScript を外部ファイルとして読み込むことも可能だ。

■HTML5の普及に積極的な Google の取り組みについて
2009年5月、米国で開催された開発者向けイベント「Google I/O」の基調講演では、HTML5と JavaScript API を使った様々なデモンストレーションが行われ、今後、HTML5が技術的な標準言語となることについて言及した。

また同社は、先述のデモサイト「YouTube HTML5 Demo」をはじめ、HTML5の普及・促進などを目指した開発者のためのコミュニティサイト「html5-developers-jp」を立ち上げるなど、積極的な HTML5の取り組みを行っている。

■Web の世界に大きな革新がはじまろうとしている
HTML4.01の勧告から約10年、Web の世界では Flash や Ajax などの先進的な技術が次々と誕生した。これらの技術進歩の流れを取り入れ、大幅に進化を遂げた次世代 HTML 規格 HTML5は、時代のニーズに応える新しいマークアップ言語であると言えよう。

現時点では各種ブラウザの対応が不完全であり、完全にサポートされるまでには時間がかかると予想される。しかし、セマンティックな構造化言語への進化や、Web アプリケーション開発を容易にする魅力的な機能を持つ HTML5は今後、Web の世界に大きな革新を与えることであろう。

2010年9月に正式勧告を予定している次世代 HTML 規格 HTML5の今後の動向に注目してほしい。

（執筆：株式会社アイレップ SEO グループ SEO チーム ディレクター 柴田源樹）