WEB系の技術を詳しく解説

HTML5のカテゴリとコンテンツモデルについて整理する

HTML5では従来のタグの廃止に加え、新たなタグが多数追加されました。それに合わせてルールが一新された部分も多くあります。

今回はHTML5で新しく追加された「コンテンツモデル」の概要とその詳細について整理していこうと思います。

スポンサードリンク

コンテンツモデルとは

HTML5のコンテンツモデルとは、各要素ごとに内包できるコンテンツを定義したルールの事です。簡単に言うと「どの要素に、どの要素を入れてよいかを定義した入れ子構造のルール」の事です。HTML5では要素が主に7つの主要なカテゴリと、それ以外の3つのカテゴリに分類されており、それらを適切な入れ子構造でマークアップしていくことが良い書き方であると言えます。

例えば、hgroupというタグの中にはh1-h6のタグしか含めることができません。


<hgroup> 
  <h1>aaa</h1>  
  <h2>bbb</h2>
</hgroup>

こういうのはダメということですね。


<hgroup>
  <h1>aaa</h1>
  <p>bbb</p>
</hgroup>

hgroupタグの中にpタグが入れ子で入ってしまっています。これは正しくないマークアップの一例です。下記で紹介するカテゴリによって、親要素がもてる子要素のコンテンツモデルが決定されます。

要素のカテゴリ

主要な7つのカテゴリ

メタデータ・コンテンツ meta, title, script, link, base, noscript, template
フロー・コンテンツ a, article, aside, blockquote, cite, canvas, h1, h2,…,footer, button, ol, label, span, table, svg, … etc
セクショニング・コンテンツ article, aside, nav, section…etc
ヘッディング・コンテンツ h1, h2, h3, h4, h5, h6, ….etc
フレージング・コンテンツ a, abbr, area, audio, code, cite, canvas, img, input, span, strong, sub, svg, time, video…etc
エンベディッド・コンテンツ canvas, audio, embed, iframe, math, object, svg, img, video…etc
インタラクティブ・コンテンツ a, button, input, select, textarea, …etc
メタデータ・コンテンツ

メタデータ・コンテンツは名前の通り、ドキュメントのメタデータやスタイル、JSの定義等のブラウザには直接的に表示されない要素を指します。

base、link、meta、noscript、script、style、template、title要素がこれにあたります。

フロー・コンテンツ

フロー・コンテンツは基本的にドキュメント内に現れるコンテンツ全般の事を指します。body内に出てくる要素の殆どがこれです。

a、abbr、address、area、article、aside、audio、b、bdi、bdo、blockquote、br、button、canvas、cite、code、command、data、datalist、del、details、dfn、dialog、div、dl、embed、em、fieldset、figure、footer、form、h1〜h6、header、hgroup、hr、i、iframe、img、input、ins、kbd、keygen、label、main、map、mark、menu、meter、nav、noscript、ol、output、p、picture、pre、progress、q、ruby、s、samp、script、section、select、small、span、strong、sub、sup、table、template、textarea、time、u、ul、var、video、wbr要素がこれにあたります。

セクショニング・コンテンツ

セクショニング・コンテンツは章・節等の「見出し+コンテンツ内容」の階層構造を示す範囲を定義する要素のことです。

HTML5を理解するために最も重要なカテゴリと言っても良いでしょう。

article、aside、nav、section要素がこれにあたります。

ヘッディング・コンテンツ

ヘッディング・コンテンツはセクションのヘッダーに関連する要素のことです。いわゆる見出しはこれにあたります。h系列の要素がこれにあたります。

フレージング・コンテンツ

フレージング・コンテンツとは、ドキュメントのテキストの事です。段落を表すタグはこれに含まれないことに注意して下さい。フレージング・コンテンツに属するのは段落の中のテキスト範囲を示す要素が殆どです。

a、abbr、area、audio、b、bdi、bdo、br、button、canvas、cite、code、command、data、datalist、del、dfn、embed、em、i、iframe、img、input、ins、kbd、keygen、label、map、mark、meter、noscript、object、output、progress、q、ruby、s、samp、script、select、small、span、strong、sub、sup、textarea、time、u、var、video、wbr、picture、templatey要素がこれにあたります。

エンベディッド・コンテンツ

エンベディッド・コンテンツはドキュメントに外部のリソースを含むコンテンツ、そしてHTML以外のリソースを表現するコンテンツを指します。

audio、canvas、embed、iframe、img、object、video、picture要素がこれにあたります。

インタラクティブ・コンテンツ

インタラクティブ・コンテンツはユーザーに操作を与える要素のことです。

a、audio、button、details、embed、iframe、img、input、keygen、label、menu、object、select、textarea、video要素がこれにあたります。

それ以外の3つのカテゴリ

フォーム関連要素 フォームに関連する要素
セクショニング・ルート blockquote, body, details, fieldset, figure, td(下記説明を参照)
カテゴリに属さない要素 それら以外の要素

コンテンツモデルを理解するために非常に重要になるのがこの「セクショニング・ルート」の概念です。

セクショニング・ルートとなる要素はセクショニング・コンテンツとは異なり、ドキュメント全体の階層構造(すなわちアウトライン)とは別の、独自の階層構造を持ちます。これらの要素内にあるセクションや見出し(hgroup)は祖先のアウトラインには表れないという特徴を持っています。例えば、blockquote内のh1要素があるとしたら、そのh1要素は祖先のアウトラインには表れないということです。

まとめ

HTML5のカテゴリとコンテンツモデルについて簡単に整理してみました。意外と覚えることが多く、奥が深いのでHTML5を勉強している人は是非一度各自で調べてみて下さい。

スポンサードリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です