【HTML5】要素の分類方法(コンテンツモデル)

      2016/08/15

HTMLには要素が大量にあり、把握しやすいように分類する方法があります。
HTMLの要素について理解を深めるため、分類方法について調べたことをメモしてます。

要素の分類

要素の分け方

HTML4.01以前は、大きく分けるとブロックレベル要素と、インライン要素で分類していた。
HTML5では、「要素の働き」「要素の中に何を入れられるか」を元にした「コンテンツモデル」で分類する。

主なコンテンツモデル

contentsmodel_1

  1. メタデータコンテンツ

    文書情報、スタイルを定義する要素が該当。meta、script、style等。

  2. フローコンテンツ

    文書に使われるほとんどの要素が該当。body要素に入れられる要素。

  3. セクショニングコンテンツ

    セクションの範囲を定義する要素。article、aside、nav、section。

  4. ヘッディングコンテンツ

    セクションのヘッダー。h1~h6。

  5. フレージングコンテンツ

    1つの段落を作る要素。b、span、strong、img。

  6. エンベディッドコンテンツ

    文書に他のデータを埋め込むもの。img、canvas、iframe、video等

  7. インタラクティブコンテンツ

    ユーザが操作できる要素。a、button、input等

図を見るとフローコンテンツが、ほとんどのコンテンツを包含している。
フローコンテンツはbody要素に入れられる要素という事なので、納得。
以前のブロックレベル要素は、フローコンテンツに近い。

以前のインライン要素に近いものは、b要素やspan等のフレージング要素。

トランスペアレントコンテンツ

主なコンテンツとして図には載っていないが、トランスペアレントコンテンツというのがある。
a要素がトランスペアレントコンテンツに属する。
トランスペアレントは透過を意味するので、このコンテンツは親要素を透過する。
例えばli要素の中にa要素が入っている場合、a要素はli要素が子に入れられる要素と同じものを子として入れる事ができる。

 - HTML , , ,