これまでの HTML4.01 や XHTML1.0/1.1 は、主にマークアップに関する仕様と言えます。しかし、HTML5 は、それが扱う範囲が大幅に拡大しています。
HTML5 の新機能の多くは、Web アプリケーションのためのより良いプラットフォームを作成するために開発されています。HTML5 では、新たに導入された section 要素や article 要素といった文書構造を表す要素などのより意味の分かりやすいタグと、クロスサイトおよびクロスウィンドウでのやり取りの改善や、video 要素や canvas 要素などのマルチメディア系の要素などが注目されがちですが、JavaScript による Web アプリケーションの基礎となる技術やアクセシビリティなども扱います。つまり、HTML5 は、Web 全体を包括する仕様の集まりとなります。そういう意味で、HTML5 は、ウェブ・アプリケーション・プラットフォームの標準と言えそうです。
これら HTML5 の機能を使う Web 開発者にはユーザーの操作環境を改善するための新しいツールが数多く提供されています。
また世間一般に HTML5 という場合、HTML5 仕様から独立した API の仕様や、それに関連する API の仕様も含む場合があります。どこまでを HTML5 と呼ぶかは文脈によって、そして人によって様々ですが、それほど、HTML5 に関連する仕様は多岐にわたっているのです。
HTML の新しいバージョンがリリースされるたびに新しいマークアップが導入されていますが、コンテンツの意味に直接関連する新機能がこれほど追加された事は一度もありませんでした。
ビデオ、オーディオ、ベクターグラフィックスのための Flash や Silverlight はもう必要ありません。Flash ベースのビデオプレイヤーを使うのはわりと簡単ですが、Apple のモバイルデバイスでは動作しません。この市場は大きいので、Flash を使わずにビデオを処理する方法を学ぶ必要があるでしょう。
開発者は、より高機能で対話性に優れた Web アプリケーションを作成するために、ActiveX コントロールから Flash まで、ありとあらゆるものを試してきました。驚くべき事に、HTML5 のいくつかのケースでは、サードパーティテクノロジーの必要性を完全になくしてしまうほどの機能を提供します。
Web ブラウザは、あるドメインでのスクリプトの使用が、別のドメインのスクリプトに影響を及ぼしたり、それらがやり取りしたりするのを阻止します。この制限は、何の疑いもなくサイトにアクセスしてきたユーザーに悪事を働くために使われてきたクロスサイトスクリプティングからユーザーを保護します。
ただし、それによってスクリプトは 1つも動作しなくなります。スクリプトを書いたのが自分で、その中身が信頼できる事がわかっているケースも例外ではありません。HTML5 には、安全かつ簡単に実装できる対応策が含まれています。
HTML5 は、サーバへの永続接続を可能にする WebSocket をサポートしています。進捗状況を更新するためにバックエンドのポーリングを繰り返す代わりに、Web ページをソケットに登録するとバックエンドがユーザーに通知をプッシュするようになります。
HTML5 は Web テクノロジーと捉えられがちですが、HTML5 関連仕様として Web Storage API と Web SQL Database API が追加されたことにより、クライアントのマシンにのみデータを保存するアプリケーションをブラウザで構築する事が可能になっています。
ユーザーインターフェイスは Web アプリケーションにおいて非常に重要な部分であり、私たちはブラウザを思い通りに操作するために日々苦心を重ねています。たとえば、テーブルや角丸のスタイルを設定するには、JavaScript ライブラリを使うか大量のマークアップを追加して、スタイルを適用できるようにします。しかし、HTML5 と CSS3 により、そうした作業は過去のものとなります。
HTML5 は、ユーザーインターフェイスコントロールの改善を約束します。これまで、スライダー、カレンダーピッカー、カラーピッカーを構築するには、JavaScript と CSS を使うしかありませんでした。HTML5 では、ドロップダウン、チェックボックス、ラジオボタンと同様に、これらすべてが実際の要素として定義されています。まだすべてのブラウザでサポートされるには至っていませんが、これに目を光らせておく必要があります。Web アプリケーションを開発する際には、特に注意してください。こうした改善には、JavaScript ライブラリを使わずにユーザビリティを向上させるだけでなく、アクセシビリティを向上させるという利点もあります。スクリーンリーダーや他のブラウザでこれらのコントロールを特定の方法で実装すれば、障害者の作業を楽にする事ができます。
コンテンツを明確にするために、新しい HTML5 要素を使えば、スクリーンリーダーのようなプログラム上にコンテンツを簡単に表示できます。たとえば、特定の <div> や <ul> ではなく <nav> タグを利用すれば、サイトのナビゲーションがはるかに見つけやすくなります。フッター、サイドバー、その他のコンテンツの順序を入れ替えたり、完全に省略したりといった事が簡単にできます。ページの解析も全般的に容易になり、それがアクセシビリティ技術に頼る人々の操作環境の改善につながる事もあります。さらに、要素の新しい属性を使って要素の役割（ role 属性）を指定すれば、スクリーンリーダーでそれらを処理しやすくなります。
CSS3 には、テーブルの偶数行と奇数行、選択状態のすべてのチェックボックス、さらにはグループ内の最後の段落を識別できるセレクタがあります。これまでよりも少ないコードとマークアップで、より多くの事を達成できます。それにより、編集不能な HTML のスタイルの設定もはるかに容易になります。
テキストや画像のドロップシャドウは Web ページに奥行きを与えるのに役立ち、グラデーションは立体感を与えるのに役立ちます。CSS3 では、背景画像や追加のマークアップに頼らなくても、シャドウやグラデーションを要素に追加できます。さらに、変形機能を使って、角を丸めたり、要素を歪曲または回転させたりできます。
HTML5 を今すぐ採用するとしたら、その最大の理由の １つは、既存のブラウザの大半がそれに対応している事です。Internet Explorer 6 でも HTML5 を使い始める事ができ、マークアップを徐々に移行させる事ができます。W3C の検証サービスを使って検証を行う事もできます（この規格はまだ発展途上にあるので、もちろん「検証結果は将来にわたって保証されるものではない」という条件付きですが）。
HTML や XML を扱った事があれば、DOCTYPE を見た事があるはずです。DOCTYPE は、使用可能なタグおよび属性の他、ドキュメントが形成される方法をバリデータとエディタに伝えるためのものです。また、ページをレンダリングする方法を決定するために多くの Web ブラウザによっても DOCTYPE が使われます。有効な DOCTYPE はたいていブラウザに「標準」モードでページをレンダリングさせます。
多くのサイトで使われている DOCTYPE は XHTML 1.0 Transitional であり、次に示すようにやや冗長です。
XHTML 1.0 TransitionalのDOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
このコードと比べて、HTML5 の DOCTYPE は非常に単純です。
HTML5 の DOCTYPE
<!DOCTYPE html>
これをドキュメントの先頭に配置すると、HTML5 を使っている事になります。
当然ながら、HTML5 の新しい要素のうち、ターゲットブラウザがまだサポートしていないものは使えませんが、上記の DOCTYPE を記述したドキュメントは HTML5 であると認められます。
HTML5 と CSS3 の普及を妨げ続けている障害がいくつかあります。その中には明白なものとそうでないものがあります。
もちろんです。マークアップの要件がより厳しい XHTML に傾倒している開発者は大勢います。属性を引用符で囲み、コンテンツタグを自己終了させ、小文字の属性名を使わなければならない XHTML ドキュメントは、World Wide Web に整形式のマークアップをもたらしました。 HTML5 へ移行するからといって、自分の流儀を変える必要はありません。HTML5 スタイルの構文か XHTML 構文を使っていれば HTML ドキュメントとしては有効ですが、空要素タグを使う事の意味を理解しておく必要があります。ほとんどの Web サーバは、MIME タイプが text/html に設定された HTML ページを提供します。これは、XHTML ページに関連付けられる application/xml+xhtml という MIME タイプを Internet Explorer が正しく処理できないためです。HTML5 がリリースされるまで、空要素タグは有効な HTML であると見なされていなかったので、ブラウザは空要素タグを弾きだす傾向にあります。たとえば、次に示す空要素スクリプトタグを <div> の上に追加したとしましょう。
<script language="javascript" src="application.js" />
<h2>Help</h2>
そうすると、ブラウザが自己終了を示すスラッシュを削除してしまうので、レンダラは <h2> が決して閉じる事のない <script> タグの中にあるものと考えます。空要素タグが有効な XHTML マークアップであるにもかかわらず、<script> タグが明示的な閉じタグ付きでコーディングされているのはこのためです。
したがって、HTML5 ドキュメントで空要素タグを使うとしたら、それらは MIME タイプが text/html の HTML ページとして提供されることになるので、このような問題が起こり得ることに注意してください。
現在、Internet Explorer のシェアは最大であり、バージョン 8 以前では HTML5 と CSS3 のサポートが非常に限定されています。Internet Explorer 9 では、この状況は改善されていますが、まだ広く使われていません。だからと言って、HTML5 と CSS3 を私たちのサイトで使えないわけではありません。サイトを Internet Explorer で正しく動作させることは可能ですが、それらが、Chrome や Firefox 用のバージョンと同じように動作する必要はありません。ユーザーを怒らせたり顧客を失ったりしないように、フォールバックソリューションを用意するだけです。
私たちのユーザーは、目や耳が不自由であっても、古いブラウザや低速な接続、あるいはモバイルデバイスを使っていても、私たちの Web サイトとやり取りできなければなりません。HTML5 では、<audio>、<video>、<canvas> といった新しい要素が導入されています。オーディオとビデオには常にアクセシビリティの問題がありましたが、<canvas> 要素は新しい難題を突き付けます。それは、<canvas> 要素では JavaScript を使って HTML ドキュメント内でベクター画像を作成できる事です。これは視覚障害者にとって問題であるだけでなく、JavaScript を無効にしている 5％の Web ユーザーにとっても問題です。
新しいテクノロジーを推進し、こうした HTML5 要素に対して適切なフォールバックを提供する際には、Internet Explorer を使っているユーザーに配慮するのと同様に、アクセシビリティにも配慮する必要があります。
HTML5 では新しい要素がいくつも導入されていますが、その仕様を読むと、Web ページで使われているかもしれない一般的な要素の一部が推奨されなくなっていることが分かります。このため、今後はそれらを取り除いていった方が良いでしょう。
詳しくは ＞＞ 廃止になった要素
HTML5 と CSS3 の導入を遅らせているブラウザは Internet Explorer だけではありません。Google、Apple、Mozilla Foundation も独自のアジェンダを掲げて、主導権争いを繰り広げています。競合各社はビデオ/オーディオコーデックのサポートについて議論を交わし、それぞれのブラウザリリースに独自の見解を盛り込んでいます。たとえば、Safari は MP3 オーディオを <audio> 要素で再生しますが、Ogg ファイルには対応しません。これに対し、Firefox は MP3 ファイルではなく Ogg ファイルをサポートします。
これらの相違点はいずれ解消されるでしょう。当面は、ターゲットユーザーが使っているブラウザに合わせて実装するコードを制限するか、規格が確定するまでブラウザごとに実装を繰り返すことにより、何をサポートするかに関して賢明な選択を行う事ができます。それは思ったほど手間のかかる事ではありません。
HTML5 と CSS3 は最終仕様ではないので、それらの仕様の内容はすべて変更される可能性があります。Firefox、Chrome、Safari は HTML5 のサポートに積極的ですが、仕様が変化すれば、ブラウザもそれに従って変化します。このため、ブラウザでうまく表示されない Web サイトが出てくる可能性があります。これを執筆している間も、CSS3 のボックスシャドウが削除されたかと思ったら復活し、さらには WebSocket プロトコルが変更されたため、クライアント/サーバー通信が完全にダメになってしまいました。
HTML5 と CSS3 の進捗を追跡し、常に最新情報を把握していれば、問題はないでしょう。
ターゲットブラウザの 1つでうまくいかないものに出くわした場合は、JavaScript と Flash をパテとして、その都度隙間を埋めてください。すべてのユーザーにとって有効で堅実なソリューションを構築していけば、JavaScript やその他のフォールバックソリューションを削除できるようになり、実装を変更する必要もないでしょう。