トップ > スキル : Web > HTML5

Web

HTML5の概要

HTMLのバージョン5、つまり改訂第5版がHTML5となります。現在の主流はHTML4.01ですので、次世代のWeb世界の環境として仕様が作成されました。

HTML5の歩み

HTML4やXHTML1の目的は、HTMLタグで構造付けされたHTML文書を作成することでしたが、Webの進化に伴って複雑な機能を持ったWebアプリケーションを作るまでには至っていません。

HTML5は2011年5月に最終審議され、今後微調整はあるとしても大きな仕様は変更はないとされています。W3Cの反票によれば、HTML5の仕様が確定されてW3C勧告として公開されるのは2012年の予定となっています。

しかし、現在のFirefox、Google Clrome、Safari、Opera、IE9などのブラウザでは、HTML5の機能の一部が徐々に実装されてきています。スマートフォンは、先陣を切ってHTML5とCSS3を多く取り入れています。もちろん、OSのバージョンによってサポートされている、されていないがありますが、新バージョンになるほど導入される要素が増えてくるのは確実です。

HTML5は、HTMLタグを使ってHTML文書を作ることはHTML4と同じです。また、レイアウト・デザインに特化するCSSと組み合わせることも基本となります。つまり、HTML5も文書構造をシンプルに作り上げるためのものです。

HTML4とHTML5との違い

HTML5とHTML4のマークアップの違いは3点あげられます。

コンテンツモデル

HTML5では、コンテンツモデルという概念が導入されました。これは、HTML4のブロックレベルとインラインという概念に置き換わるもので、要素をグループ化して名前を付けますが、そのグループに属する要素には、どのコンテンツを入れても良いのかが規定されます。
このコンテンツモデルに従って記述しないと、規定準拠とならないので、十分に気をつけてマークアップをする必要があります。


アクセシビリティ重視

HTML4では、アクセシビリティに対して細かな規定はされていませんでしたが、HTML5ではアクセシビリティに配慮した規定がなされています。


要素の変更

HTML5では、section要素、video要素、audio要素、canvas要素など、いくつかの要素が新たに追加されました。また、見え方を指定するだけの要素(font要素、big要素など)は、廃止の対象にされました。
この他に、文字コーディングの指定方法、DOCTYPE宣言の扱い方も変更されています。

新しく導入された要素

HTML5では、新しい要素が数多く増えました。代表的な新要素だけをピックアップしてみました。表記順は、アルファベット順にしております。

aside要素
補足記事やサイドバーのように、ページのメインコンテンツに関する参考コンテンツを含んだセクションを表します。
article要素
ブログやニュース記事のように、単独で成り立つようなコンテンツを含んだセクションを表します。
audio要素、video要素
これらの要素を使えば、プラグインなしにオーディオ・ファイルやビデオ・ファイルを再生できるようになる。
canvas要素
グラフやゲームなど、動的な2次元ビットマップ画像の描画のために使います。
command要素
ユーザが呼び出すことができるコマンドを表します。menu要素の中で、メニューの項目として使います。
datalist要素
input要素の入力用に、コンボボックスに入力候補を表示するために使います。
details要素
ユーザの要求に応じて表示させることを想定した追加情報を表します。
embed要素
プラグインコンテンツを表します。これまでも使われてきましたが、HTML5で正式に規定されました。
figure要素、figcaption要素
figure要素は、イメージやビデオなどの組み込みコンテンツと、そのキャプションをグループ化するために使います。キャプションにはfigcaption要素を使います。
footer要素
セクションのフッタを表します。主に、著者やコピーライトなどを入れて使います。
header要素
セクションのヘッダを表します。
hgroup要素
セクションの見出し(h1~h6)をグループ化するために使います。
keygen要素
フォーム送信時に秘密鍵と公開鍵を生成します。主に電子証明書の発行に使います。
mark要素
ページ著者がページ読者に注意を払わせたい部分を表します。
meter要素
ディスク使用率といった計測結果を表します。
nav要素
主に、サイト内のリンクを含んだセクション、サイト・ナビゲーションに使います。
output要素
計算結果を表します。
progress要素
何かしらの処理の進捗状況を表します。
ruby要素、rt要素、rp要素
ルビを表すために使います。
section要素
一般的なセクションを表します。h1~h6とそれに付随するコンテンツをグループ化するために使います。
source要素
audio/video要素の中に入れて、該当のマルチメディア・ファイルのURLやMIME-Typeを複数指定します。
time要素
新暦のグレゴリオ暦における正確な日付、そして場合によっては時刻を表します。

【HTML5の概要】