HTML5がやってきた！Vol.1

2010/05/10 キーワード：【 Webサイト】【 Webアプリケーション】

Webサイトを記述するためのもっとも基本的な言語であるHTML。そのHTMLが、前回のバージョンが発表された1997年から実に十年以上の月日を経て生まれ変わろうとしています。このコラムではHTMLの新たなバージョンであるHTML5のエキサイティングな仕様を簡単に紹介するとともに、HTML5の登場によりWebの世界はどう変化していくか、そしてクリエイティブの現場はその変化にどのように対応すべきかを3回に分けて考えてみたいと思います。

HTML5策定の背景

さっそくHTML5の具体的な紹介に入りたいところですが、ちょっとその前にHTML5の仕様が策定された経緯と背景を知るために、ここ最近のHTMLの動きを駆け足で振り返ってみましょう。

文書からアプリケーションへ

ひとつ前のバージョンであるHTML4.0は1997年に標準化団体W3Cより勧告され、その後1999年には若干の修正を加えたHTML4.01が発表されました。HTML4.01の完成度は非常に高く、現在でも広く使用されています。しかしながらWebの進化に伴いHTML文書以外にもWebアプリケーション、つまりユーザの動きや操作に反応して何らかの動的処理を行う仕組み（例えばgmailはあたかもデスクトップ上のメールソフトのように動作しますね）へのニーズが高まってきました。ハードウェアの進化とブロードバンドの実現によって「処理速度」という面では飛躍的に向上したWebの世界において、「機能」の面からもさらにリッチなコンテンツを求める声が挙がってきたということです。しかしながらHTMLは「文書」を作成するのに特化した言語なので、今のままだとWebアプリケーションを構築するには足りない部分が多いのです。その弱さを補い、Web上での様々な表現を行うための礎、言い換えればWebアプリケーションのプラットフォームとなることがHTML5のひとつの目標です。

図1：YouTubeのHTML5プレーヤー

現在Webアプリケーションの多くはブラウザの中のソフトウェアであるプラグインを用いて実現されています（皆さんも動画サイトを利用する際にプラグインのインストールを求められた経験があるはずです）。実際、プラグイン無しには現在の Webの世界を十分に味わいつくすことができないといっても言い過ぎではないでしょう。しかしながら、プラグインはあくまでブラウザの「外付けの機能」でしかありません。したがってそこにはエネルギーロスとバグというリスクが確実に潜んでいます。例えばあなたが外国で通訳を雇った場合、同じ言語で直接会話するのと比べて、そこには「余計な費用」が発生し、（通訳のスキルによっては）「誤解」の可能性が生じるのと同じです。

少し話がそれましたが、HTMLによるWebアプリケーションへの対応が求められるなかで、HTMLを拡張する必要を感じたMozilla、Opera、Appleのブラウザベンダー3社は2004年にWHATWG（Web Hypertext Application Technology Working Group）を設立し、HTMLの改訂に乗り出しました。2007年にはW3C内でもHTMLワーキンググループが設立され、WHATWGと共同でHTML5の策定が始まり、現在に至っています。

仕様は未だ策定中・・・

現在、HTML5は、まだドラフト（草案）の段階にあり、実際の勧告は2012年の3月とされています。ブラウザの対応状況を考える正式な勧告までにはもう少し時間が必要でしょう。ただし、勧告前だからといってHTML5が使えないということはありません。仕様の一部は昨年頃から徐々に各ブラウザに実装されてきており、それらの機能は今すぐにでも使うことができます。今後はブラウザの実装状況をみながら使える機能から普及が進む見込みです。

そもそもHTML5って？

前置きが長くなりましたが、では実際にHTML５の特徴を見ていきましょう。
ごく簡単にHTML5の目標を挙げるならば次の2点になります。

　1.　文書のさらなる構造化
　2.　Webアプリケーションへの機能提供

第1回目の本稿では「1.　文書のさらなる構造化」について考えてみたいと思います。

「セマンティクWeb」の実現

HTMLは「文書の構造を規定する」ための言語です。HTMLファイル上では、ページの内容を「h1」や「li」といったHTMLタグでくくる（マークアップする）ことにより、それが「見出し（h1）」なのか「リスト（li）」なのかを示しています。HTML5では現在よりもさらに高度な構造化が図られることになりました。一般的にこれを「セマンティックWebの実現」と表現します。

図2：HTML4のサイト構造

例えば現在までの一般的なWebサイトの構造は図2のようなものでした。ご覧の通りヘッダーやナビといった一連のまとまりごとに「div」というタグでくくられています。
重要なのは「div」というタグが「h1」や「li」といったタグとは違い、タグの中に記述された内容の「意味」を表すものではない、ということです。「div」は、くくられた文字や画像などを特定の位置に配置したりスタイルを適用したりするために便宜上付けられている「印」に過ぎません。例えばブラウザはHTMLファイルに記述された指示を読み、「div id="header"」というまとまりをページ最上部に表示するでしょう。しかしそれらのまとまりがいわゆる「ヘッダーである」ということをブラウザは認識できません。

図3：HTML5のサイト構造

一方、図3がHTML5で書かれたHTML文書の構造です。先程のものと比べて全体的にシンプルな記述になっているのが分かります。
さらにヘッダー部分は新たに追加されたタグ「header」によってくくられています。これにより（HTML5の仕様を理解している）ブラウザは、これが「ヘッダーである」と認識することができます。以上を簡単にまとめると、 HTML5の登場によって「情報の意味」つまり「書かれた内容が文章上どのような役割を担っているか」がさらに分かりやすくなりました。HTML5には新たに以下のような要素が追加されています。

図4：HTML5で新たに追加された要素

人間にとってのメリットは？

HTML5により、どうやらブラウザがページの内容や意味を把握しやすくなった、ということは理解していただけたかと思います。ところで、これって人間にとってどんなメリットがあるのでしょうか？

アクセシビリティの向上

ユーザーにとってのメリットを一言で表すとすれば、アクセシビリティの向上です。
例えばセマンティックなWebページのタグは、障害のある人へのナビゲーションの役割を果たします。弱視のユーザーが読み上げソフトを使ってWebページを閲覧する場合、各ページに共通して繰り返される「header」や「footer」をパスして本文の部分だけを読み上げることが可能です。これは一般的な意味で「アクセシビリティが向上した」と言えるでしょう。
ここで、もっと広い意味で「アクセシビリティ」を考えてみましょう。サイト上のWebページに「アクセス」するのは我々人間だけではないはずです。

HTML5とSEO

実際にサイトを構築し、さらにアクセス解析を試みているウェブマスターならすでにお気付きのように、Webサイトには時折サーチエンジンの送り出すロボット（クローラー）が訪れています。彼ら（厳密にはクローラーから情報を受け取ったインデクサー）はHTMLファイルを読み、そのページがどんな内容なのか「彼らなりに」解釈します。

HTML5で新たに追加されたタグは、その解釈の手助けをすることでしょう。例えば「header」でくくられた部分にはサイト全般に関わる情報が記載されているはずですので「footer」でくくられた情報よりも重要と判断するかもしれません。HTML5によるセマンティックWebの実現といわゆるSEOの関連性については、今の段階ではまだまだ未知数の部分が多いです。ただしHTML5はその性質上サーチエンジンとの親和性が非常に高いというのは事実です。SEOには様々な施策がありますが、そのなかでも「正しくサイトを記述すること」の重要性が、現在よりもさらに高まることでしょう。

次回は・・・

今回はHTML5に至った経緯とセマンティックWeb、という少し固い内容でしたので若干肩すかしを食らった方も多いかと思います（笑）。

しかし今回の紹介した内容はHTML5の機能のほんの一部に過ぎません。次回からいよいよHTML5の最大の特徴であるWebアプリケーションへの機能提供について考えてみたいと思います。
果たしてHTML5は私たちにどんな新しい体験を与えてくれるのでしょうか？