【HTML5】HTML4からの変更点
2011.11.18 Posted by Erika
HTML5に関してある程度分かってきたところで、具体的にHTML4と5ではどう違うのでしょうか。
HTML5におけるHTML4からの主な変更点を大きくまとめると次の3つになります。
1.コンテンツモデル
2.アクセシビリティ重視
3.要素の変更
1.コンテンツモデル
HTML5で新たに導入された概念です。
HTML4ではブロック要素、インライン要素といった概念を用いていましたがHTML5ではこれらの概念はありません。
a要素やspan要素でp要素やul要素を囲うことも可能になるのです。
代わりに「メタデータ」、「フロー」、「セクション」、「ヘッディング」、「フレージング」、「エンベッディッド」、「インタラクティブ」という要素の種類が定義され、これらは「コンテンツモデル」と呼ばれます。
これらコンテンツモデルを意識することがhtml5において重要になります。
| メタデータ | ドキュメントのメタデータ、スタイル（meta、script、style、titleなど） |
|---|---|
| フロー | ドキュメント内に現れるコンテンツ全般（a、br、img、p、divなど） |
| セクショニング | 章や節など（article、aside、nav、sectionなど） |
| ヘッディング | 見出し（h1～h6、hgroup） |
| フレージング | ドキュメントのテキスト（a、img、input、objectなど） |
| エンベッディド | 外部リソース、HTMLでない別の言語（audio、canvas、embed、object、videoなど） |
| インタラクディブ | ユーザーが操作できるもの（a、audio、img、inputなど） |
これらのコンテンツ・モデルにより、どの要素の中にどの要素を配置できるかというタグの配置ルールが決まるので、タグの意味を考えたマークアップが必要になります。
それによって文書構造をより明確に表現することが可能になるのです。
2.アクセシビリティ重視
HTML4の仕様ではアクセシビリティに関して細かく規定されていませんでした。
HTML5では上記のコンテンツモデルの導入によって、文章構造の意味を明確化します。
また、W3Cによって策定されているアクセシビリティの仕様に対応するので、スクリーンリーダーがコンテンツの内容をより正確に理解できるようになる、フォームの入力補助やチェック機能などが充実するなど、より高いアクセシビリティを実現することが可能になります。
3.要素の変更
コンテンツモデルの例でいくつか見覚えの無いタグがあったかもしれません。
HTML5では新たなタグが多く加わります。
・文章構造やセマンティックにできる要素（section、article、hgroup、header、footerなど）
・マルチメディア対応の要素（video、audioなど）
・図形を描写する要素（canvasなど）
逆に廃止される要素や意味が変わる要素もいくつかあり、center、font等のタグは採用されない予定です。
関連記事こちらの記事も合わせてどうぞ。
