Google I/Oの基調講演で大きく取り上げられて以来、HTML 5に対する注目度は増すばかりだ。仕様に関する議論もWHATWGのメーリングリストで日々活発に行われ、ブラウザによる実装も着々と進んでいる。
本記事は、HTML 5の仕様や実装状況に関する現時点での最新レポートとして、実際に動作するサンプルを添えた詳細な解説をお届けするものである。HTML 5の仕様はまだまだ流動的であり、実装状況も刻一刻と変化しているが、HTML 5に対して強く興味を持っている方々に少しでも詳しい情報をお届けできれば幸いである。また、HTML 5で追加される各種の新機能について短時間で把握したい場合は、「5分で把握するHTML 5 - Google Developer Dayセッションリポート」という記事があるのでそちらもお薦めだ。
本特集は全2回から成り、前半となる今回では「HTML5 - HTMLとXHTML向けのボキャブラリと関連API」から、HTML 5で新しく導入されたタグやAPIを中心にお伝えする。今回紹介する内容は以下の通りだ。
- HTML 5マークアップについての簡易リファレンス(新要素/廃止された要素/DOCTYPEについて)
- Video/Audio要素とそのAPI
- Canvas要素とそのAPI
- 大幅に強化されたフォーム要素
- アウトラインを意識したマークアップ(section,articleなどを用いたマークアップ方法)
- ドラッグ&ドロップAPI
Web StorageやWeb Workersと言った、Webアプリケーション作成に深く関わるAPIについては、次回の特集で取り上げる。
今回調査対象としたブラウザは次の通り。ベータバージョンも含めた最新のバージョンをチョイスした。Internet Explorerについては、最新バージョンの8でもHTML 5への対応があまり進んでいなかったため、対象から外させていただいた。
- Firefox 3.5/Mac OS X
- Google Chrome 3(Beta)/Windows XP
- Safari 4/Mac OS X
- Opera 10.00_b1(Beta)/Mac OS X
今回のサンプルは、これらのブラウザすべてで動作するわけではない。HTML 5への対応状況はブラウザごとにかなり異なっているためだ。そのため、サンプルを紹介するときには必ず対応ブラウザも明記することとした。
また、手前味噌な話で恐縮であるが、HTML 5開発者のためのコミュニティとしてhtml5-developers-jpを立ち上げたことをご報告しておく。Googleの準公式コミュニティという扱いのおかげか、立ち上げて間もないのに多くの方々に参加していただいている。HTML5を用いた開発に興味がある方は、ぜひ気軽に参加していただきたいと思う。