入門
第1回 HTML5の現状

HTML5の特徴、HTMLの策定を進めるW3Cの取り組み、ブラウザベンダーの対応状況、企業サイトでの使用例を概観します。HTML5はすでに現場で使われて、浸透し始めている技術であることが分かります。

2012年06月28日発行

目次

HTML5の概観

まずHTML4からHTML5で何か変わるのか?その進化ポイントを概観してみましょう。

HTML5はHTML5と連携して使うAPIなど、さまざまな要素技術の総称として使われることもありますが、ここで取り上げるのはHTML5 Core(コア)と呼ばれる純粋にHTML5の仕様のことです。

HTML5 Coreと周辺技術
HTML5にはさまざまな周辺技術があるが、このシリーズで取り上げるのはHTML5そのもの。

HTML5ではおよそ30種類の新しい要素が追加されています。これらの要素が登場することによって強化されるポイントが3つあります。具体的な内容は、次回以降、詳しく触れますので、ここではポイントだけおさえます。

セマンティクスの強化

これまで扱えなかった文書構造を扱えるようになっています。例えばsection要素、article要素、figure要素などが代表的なものです。

埋め込みオブジェクトの強化

これまで特別なプラグインを用いなければ扱うことのできなかったビデオなどのオブジェクトをダイレクトに要素として記述できるようになりました。video要素、canvas要素、svg要素などが代表的です。

フォームの強化

主にテキスト入力に使用されていたフォームが強化され、属性を指定するだけでプレースフォルダや、所定のフィールドへのオートフォーカスなどができるようになりました。また上下の矢印による数値の入力やスライドによる入力、カラーピッカーなど入力のインターフェイスも豊かになっています。

フォームの新機能
HTML5の記述だけで作られたフォーム。テキストフィールドにあらかじめ文字を表示しておくプレースフォルダや、スピンボックスによる数値の入力なども可能。Internet Explorer 9は対応していない。

W3CでのHTML5策定経過:W3Cの動向

HTML5の仕様はW3Cで進められています。

HTML5

http://www.w3.org/TR/html5/

W3Cの仕様は通常、複数の草案を公開しつつ修正を重ね、最終的な「勧告」にいたります*。

  1. Working Draft(草案)
  2. Last Call Working Draft(最終草案)
  3. Candidate Recommendation(勧告候補)
  4. Proposed Recommendation(勧告案)
  5. 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)

http://www.html5rocks.com/ja/

ChromeのベンダーであるGoogleのサイトです。HTML5で可能な実装をカタログ的に見ることができます。

Apple - HTML5(Apple)

http://www.apple.com/html5/

SafariのベンダーであるAppleのサイトです。iPadやiPhoneも含めたSafari搭載機器がどれほどHTML5に対応しているかをショーケースとして閲覧できます。

Demo Studio(Mozilla Foundation)

https://developer.mozilla.org/ja/demos/

FirefoxのベンダーであるMozilla Foundationのサイトです。ユーザーからHTML5関連技術を用いたデモの投稿を受け付けています。

Internet Explorer Test Drive(Microsoft)

http://ie.microsoft.com/testdrive/

Internet ExplorerのベンダーであるMicrosoftのサイトです。このサイトマップでもわかるようにHTML5関連技術を用いたデモが充実しています。

ブラウザベンダーもHTML5に注力

以上のように、主要ブラウザベンダーのほとんどがHTML5関連技術のサイトを立ち上げていて、それらの技術に注力していることが分かります。

どの程度制作に使われているか:Web制作者の動向

それでは実際のサイト制作にHTML5はどの程度使われているか紹介します。以下に挙げる4サイトはそれぞれ大手企業のメインサイトです。これらはすべてHTML5で構築されています。

ローソン

http://www.lawson.co.jp/

ローソンのメインサイトです。ソースコードを表示し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宣言です。

ニッスイ(日本水産)

http://www.nissui.co.jp/

ソースコードは以下のようになっています。同じようにHTML5のDOCTYPE宣言になっています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ニッスイ商品情報サイト:日本水産株式会社</title>

無印良品

http://www.muji.net/

こちらもソースコードは以下のようにHTML5の宣言が書かれています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>無印良品</title>

霧島酒造

http://www.kirishima.co.jp/

ソースコードのDOCTYPE宣言は以下の通りです。やはりHTML5です。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>霧島酒造株式会社</title>

HTML5はすでに制作現場で使われている

4つのサイトをみてわかるように、HTML5は仕様策定段階とはいえ、すでに実際のサイト制作で使われています*。ただどの程度使われているかは一様ではありません。

*参考:HTML5の使用例

この他にもアメリカ政府サイトなど複数の使用事例があります。HTML5使用サイト(小山田のブログ執筆当日現在)

次回はサイトを分析して分かるHTML5の使用パターンについて概観します。

小山田 晃浩
小山田 晃浩
フロントエンド・エンジニア

2006年よりWeb制作会社にてUI実装や運用業務を経験した後、2010年よりフロントエンド・エンジニアとして株式会社ピクセルグリッドに入社。これまでの経験の大半は大規模Webサイトの壊れにくいHTML/CSS設計、及び実装。また、SVG, Canvas, WebGLの扱いも得意としている。 外部に向けたアウトプットも積極的に行っており、カンファレンスでの講演などを多数こなしている。Tokyo WebGL Meetupの主催者。2011年から2015年まで5連続でMicrosoft MVP for IEを受賞。 著書に『Webデザイナー/コーダーのための HTML5コーディング入門』(共著:エクスナレッジ、2011年3月12日)や『CSS3デザイン プロフェッショナルガイド』(共著:毎日コミュニケーションズ、2011年5月28日)』などがある。

外村 奈津子
外村 奈津子
エディター

情報出版社に在籍中、Mac雑誌、中高年向けフリーペーパー、コラムサイト運営、健康食雑誌、グラフィック・Web技術書籍編集、IT系ニュースサイトの編集記者を経験。その後フリーランスのエディター/ライターとして独立。2011年4月より株式会社ピクセルグリッドへ入社。ピクセルグリッドが提供するフロントエンド技術情報を提供するサービス「CodeGrid」の編集を担当している。