今、現場で使うHTML5 第1回 HTML5の現状
HTML5の特徴、HTMLの策定を進めるW3Cの取り組み、ブラウザベンダーの対応状況、企業サイトでの使用例を概観します。HTML5はすでに現場で使われて、浸透し始めている技術であることが分かります。
HTML5の概観
まずHTML4からHTML5で何か変わるのか？その進化ポイントを概観してみましょう。
HTML5はHTML5と連携して使うAPIなど、さまざまな要素技術の総称として使われることもありますが、ここで取り上げるのはHTML5 Core（コア）と呼ばれる純粋にHTML5の仕様のことです。
HTML5にはさまざまな周辺技術があるが、このシリーズで取り上げるのはHTML5そのもの。
HTML5ではおよそ30種類の新しい要素が追加されています。これらの要素が登場することによって強化されるポイントが3つあります。具体的な内容は、次回以降、詳しく触れますので、ここではポイントだけおさえます。
セマンティクスの強化
これまで扱えなかった文書構造を扱えるようになっています。たとえばsection要素、article要素、figure要素などが代表的なものです。
埋め込みオブジェクトの強化
これまで特別なプラグインを用いなければ扱うことのできなかったビデオなどのオブジェクトをダイレクトに要素として記述できるようになりました。video要素、canvas要素、svg要素などが代表的です。
フォームの強化
主にテキスト入力に使用されていたフォームが強化され、属性を指定するだけでプレースフォルダや、所定のフィールドへのオートフォーカスなどができるようになりました。また上下の矢印による数値の入力やスライドによる入力、カラーピッカーなど入力のインターフェイスも豊かになっています。
W3CでのHTML5策定経過：W3Cの動向
HTML5の仕様はW3Cで進められています。
HTML5
W3Cの仕様は通常、複数の草案を公開しつつ修正を重ね、最終的な「勧告」にいたります*。
- Working Draft（草案）
- Last Call Working Draft（最終草案）
- Candidate Recommendation（勧告候補）
- Proposed Recommendation（勧告案）
- Recommendation（W3C勧告）
*注：W3C勧告過程
勧告までの過程はもし大きな問題が発生すれば、一段階あるいはそれ以前の段階へ差し戻すことができます。
HTML5は2011年5月にLast Call Working Draftとなり、勧告候補に向けてレビューを開始しています。これはW3Cの当初の予定通りです。
http://www.w3.org/News/2011.html#entry-9105
W3Cは現在のところ、2014年にHTML5の勧告を予定しています。
W3CはHTML5の普及啓蒙に注力
W3CはHTML5のロゴを作成するなど、HTML5を1つのムーブメントとして推進しています。HTML5関連仕様はもっとも影響力の大きい仕様として、W3Cが注力していることが窺えます。
ブラウザの対応度はどうか：ブラウザベンダーの動向
いくらW3Cが優れた仕様を策定しても、その仕様がブラウザに実装されないことには絵に描いた餅になってしまいます。ここで主要ブラウザのベンダーの動向も見ておきましょう。
HTML5に関しては各ベンダーが啓蒙サイトを立ち上げ、自らのブラウザがどれだけHTML5を積極的に実装し、実際にどんなことができるのかを広報しています。
HTML5 Rocks（Google）
ChromeのベンダーであるGoogleのサイトです。HTML5で可能な実装をカタログ的に見ることができます。
Apple - HTML5（Apple）
SafariのベンダーであるAppleのサイトです。iPadやiPhoneも含めたSafari搭載機器がどれほどHTML5に対応しているかをショーケースとして閲覧できます。
Demo Studio（Mozilla Foundation）
FirefoxのベンダーであるMozilla Foundationのサイトです。ユーザーからHTML5関連技術を用いたデモの投稿を受け付けています。
Internet Explorer Test Drive（Microsoft）
Internet ExplorerのベンダーであるMicrosoftのサイトです。このサイトマップでもわかるようにHTML5関連技術を用いたデモが充実しています。
ブラウザベンダーもHTML5に注力
以上のように、主要ブラウザベンダーのほとんどがHTML5関連技術のサイトを立ち上げていて、それらの技術に注力していることが分かります。
どの程度制作に使われているか：Web制作者の動向
それでは実際のサイト制作にHTML5はどの程度使われているか紹介します。以下に挙げる4サイトはそれぞれ大手企業のメインサイトです。これらはすべてHTML5で構築されています。
ローソン
ローソンのメインサイトです。ソースコードを表示し1行目のDOCTYPE宣言を見てみましょう。ここを見ればHTML5であるかどうかがすぐわかります。
<!doctype html>
<html lang="ja" class="rn201008 no-js">
<head>
<meta charset="utf-8">
<title>マチのほっとステーション LAWSON｜ローソン</title>HTML4やXHTML1.0などと異なり、とてもシンプルなソースコードです。これがHTML5のDOCTYPE宣言です。
ニッスイ（日本水産）
ソースコードは以下のようになっています。同じようにHTML5のDOCTYPE宣言になっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ニッスイ商品情報サイト：日本水産株式会社</title>無印良品
こちらもソースコードは以下のようにHTML5の宣言が書かれています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>無印良品</title>霧島酒造
ソースコードのDOCTYPE宣言は以下の通りです。やはりHTML5です。
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>霧島酒造株式会社</title>HTML5はすでに制作現場で使われている
4つのサイトをみてわかるように、HTML5は仕様策定段階とはいえ、すでに実際のサイト制作で使われています*。ただどの程度使われているかは一様ではありません。
*参考：HTML5の使用例
この他にもアメリカ政府サイトなど複数の使用事例があります。HTML5使用サイト（小山田のブログ執筆当日現在）
次回はサイトを分析して分かるHTML5の使用パターンについて概観します。