HTML5
HTML5とは
HTML5を端的に説明すればHTMLのバージョン5、5回目の大きな改訂版と言うことです。基本はそれまでのHTML4と変わりませんが、多数のAPIや新しいタグが追加されています。
Wikipediaによると、下記のカテゴリがHTML5となっています。一部（Web Storage/WebSocketなど）は本来仕様書としては分離していますが、HTML5の枠組みに含めて考えられています。
- セマンティックス - HTML5の新タグ、RDFa、マイクロデータ、マイクロフォーマット
- オフラインとストレージ - App Cache、Web Storage、Indexed Database API、File API
- デバイスアクセス - Geolocation API、マイク・カメラ、アドレス帳・カレンダー、端末の向き
- 接続性 - WebSocket、Server-Sent Events
- マルチメディア - audio, video要素
- 3D、グラフィックス、エフェクト - SVG、canvas要素、WebGL、CSS3 3D
- パフォーマンスと統合 - Web Workers、XMLHttpRequest Level 2
- CSS3 - WOFFも含む
via Wikipeida - HTML5より
HTML5で追加されたタグ
HTML5ではHTMLのタグを追加または削除しています。追加されたタグの中で構造に関わるものは下記があります。
- article : ドキュメント中の記事に関わる部分に使います。
- aside : 注釈のような本筋に関係はしつつ、追加で載せておきたい文章に使います。
- bdi : 右から表記するような文章に対して使うことでブラウザの自動文字種判別を適用しないように指定します。
- details : 詳細を折り畳んで表示/非表示切り替えられるようにします。
- dialog : ダイアログボックスまたはウィンドウを定義します。
- figcaption : figureタグ向けのキャプションを定義します。
- figure : 図、写真、プログラミングコード、リストなどに使います。
- footer : ドキュメントのフッターに使います。
- header : ドキュメントのヘッダーに使います。
- main : ドキュメントのメインコンテンツ部分に使います。
- mark : テキストのハイライト、マーキングとして使います。
- menuitem : メニュー相手医務として使います。ポップアップメニューが想定されています。
- meter : ゲージ表示に使います。値の範囲と現在地を指定します。
- nav : ナビゲーションリンクで使います。
- progress : 進捗（プログレス）表示に使います。
- rp : ルビ表示をサポートしていないブラウザに対して表示する内容を定義します。
- rt : ルビの内容を記述します。
- ruby : ルビがある文章を囲みます。rp/rtタグとともに使います。
- section : セクションを定義します。
- summary : detailsタグと組み合わせて、サマリーの表示を行います。
- time : 日時を定義します。
- wbr : 改行しても良い場所を指定します。
逆に削除されたタグは次の通りです。
- acronym
- applet
- basefont
- big
- center
- dir
- font
- frame
- frameset
- noframes
- strike
- tt
良く使われているタグとしてはframe/frameset/noframeといったフレーム関係やfont、centerでしょうか。またJavaプラグインでよく使われてきたappletタグも削除対象となっています。
これらの追加タグはWebドキュメントをよりセマンティックにし、文章構造を分かりやすくするのに使えます。SEO上の利点やドキュメントリーダーなどでも役立つ情報になると考えられます。
機能上の追加タグ
Webアプリケーションを開発する上で使うことになりそうなタグは以下があります。
- audio : サウンド、音楽を流すためのタグです。
- canvas : グラフィックスを描くためのタグです。
- embed : プラグインのように外部コンテンツの埋め込み表示に使います。
- source : video/audioタグと組み合わせるソース指定のタグです。
- track : video/audioタグと組み合わせるトラック指定のタグです。
- video : 動画を流すためのタグです。
- datalist : フォーム入力で入力補完が使えるようになります。
- keygen : フォーム送信時に秘密鍵/公開鍵を生成してフォーム送信をセキュアにします。
- output : フォーム入力（レンジなど）の入力値を表示します。
フォーム入力の種類
Webフォーム入力時のtypeも種類が追加されました。これにより入力補完が容易になったり、入力値の制限ができるようになります。
- type=search : 検索用途に使います。
- type=tel : 電話/FAX番号入力に使います。
- type=url : URL入力に使います。
- type=email : メールアドレス入力に使います。
- type=date : 日付入力に使います。
- type=time : 時間入力に使います。
- type=number : 数値入力に使います。
- type=range : スライダーを使って範囲指定の入力に使います。
- type=color : カラーピッカーを使って色選択に使います。
ただしスライダーやカラーピッカーの表示などはWebブラウザが対応している必要があります。
基本的構造
HTML5の基本的な構造は次のようになります。
<html>
<head>
<title>タイトル</title>
</head>
<body>
</body>
</html>
プラグインの廃止
HTML5ではこれまでプラグインでしか実現できなかったような機能をWeb標準として実装しています。例えばFlashの動画プレーヤ、ドラッグ&ドロップのファイルアップロード、インタラクティブなアニメーション、Webカメラへのアクセスなどです。
元々プラグインはWebブラウザではなくOSの機能を使えるようになっていたため、セキュリティリスクになることが多々ありました。そのためHTML5を推進していく中で各ブラウザはプラグインをサポートしなくなったり、サンドボックス化する動きをしています。
特に大きな動きの原動力になったのはiOSがFlashのサポートをしないと明言したことではないでしょうか。その後、Flash for Androidも開発が停止し、スマートフォン分野においてはHTML5のみといった風潮になっています。
逆にデスクトップ分野においてはHTML5のシェアが拡大しているものの、レガシーなブラウザも多数存在するためプラグインを使ってHTML5非対応のブラウザでもHTML5相当の機能を使えるようにするライブラリに注目が集まっています。
動画フォーマット
HTML5ではデフォルトの動画フォーマットは定まっていません。主なフォーマットとしてはMPEG4、H.264、Theora（Ogg）、WebMがあります。Theora/WebMはオープンソースの動画フォーマットですが、DRMがサポートしがたいという問題があります。H.264は広く知られたフォーマットですが、Apple/Microsoftが特許を持っているため（利用料はとらないとしていますが）、オープンソース陣営としては使いづらいという問題があります。
直近の話題としてはW3C EMEという仕様を提案し、Firefoxもそれを受け入れると表明しました。EMEはDRM拡張であり、コンテンツ暗号解除モジュール（CDM）を使ってWebブラウザ上でDRMコンテンツを再生できる仕様となっています。なお、CDMはAdobeが開発、提供する非公開な技術なため、FirefoxはCDMをオープンソース・ソフトウェアでラッピングした上で用いるとしています。