HTML5

on Note

コンテンツモデルとは カテゴリの種類と特徴

コンテンツモデルは、「○○要素の中に○○要素が配置できる」といった、要素の配置の可否に関するルールの基準となるモデルです。

HTML5では、要素をカテゴリで分類します。そのカテゴリのことをコンテンツカテゴリと呼びます。

HTML5では、要素の配置の可否は、親要素がどのコンテンツカテゴリに属するか、そしてどのコンテンツカテゴリの要素を子要素とできるか、要素が属するコンテンツカテゴリで決まります。

ここでは、HTML5を書く際に正しくマークアップできるよう、コンテンツカテゴリの種類と特徴、そして要素の配置に関してまで触れていきます。

コンテンツモデルとは

コンテンツモデルとは、「~要素の中には△△カテゴリの要素を配置できる」という、マークアップのルールを定義したものです。要素は、自分の中に、どのカテゴリの要素を配置することができるかを定義したモデルです。

HTML5では、ブロックレベルやインラインレベルだけでなく、文章構造も重視する為、複数のコンテンツカテゴリに分類されることになったわけです。

コンテンツカテゴリの種類と特徴

HTML5では、各要素はいずれかのコンテンツカテゴリに属します。そして要素の配置の可否は、どのコンテンツカテゴリに属するかによります。

コンテンツカテゴリを基に、「~要素のコンテンツモデルは△△カテゴリーなので、△△カテゴリーに属する要素なら、~要素の中に配置できる」となります。

下の図は、各コンテンツカテゴリの関係を示したものになります。

各カテゴリの関係図

図のように、要素によっては複数のカテゴリに属するものもあります。例えば、メタデータ・コンテンツの一部の要素には、フロー・コンテンツやフレージング・コンテンツにも属するものがあります。

それではコンテンツカテゴリごとに説明していきます。

メタデータ・コンテンツ(Metadata)

基本、headタグの中で使う要素メタデータ・コンテンツに属します。

文字コードの指定、文書の説明及びキーワードを示す時などに用いるmetaタグや、CSSファイルの呼び出しなどに用いるlinkタグなんかがメタデータ・コンテンツに属します。

一部、フロー・コンテンツやフレージング・コンテンツにも属する要素があります。scriptタグがこれにあたります。

フロー・コンテンツ(Flow)

フロー・コンテンツの要素は、基本的にbodyタグの中に配置します。

bodyタグの中で使用する要素の大部分がフロー・コンテンツになります。よって、文書の本体部分は、フロー・コンテンツで形成することになります。

フロー・コンテンツを詳しく フロー・コンテンツ bodyの中に配置する要素

セクショニング・コンテンツ(Sectioning)

章や節、項といったセクションを示す為の要素がセクショニング・コンテンツです。セクショニング・コンテンツの使用により、アウトラインが生成されます。

また、グローバルナビゲーションのような、他の部分とははっきり区別されるような部分もセクションとして考えます。

セクショニング・コンテンツを使用することで、文書の、階層といったアウトラインをはっきりと示すことができます。

セクショニング・コンテンツで囲んだ部分は、一般的に見出しを持ちます。

セクショニング・コンテンツを詳しく セクショニング・コンテンツ セクションの範囲を定義する

ヘッディング・コンテンツ(Heading)

ヘッディング・コンテンツとはセクションの見出しとなる要素で、h1~h6タグがこれにあたります。

上の図でもわかるように、ヘッディング・コンテンツに属する要素は、同時にフロー・コンテンツにも属します。

ヘッディング・コンテンツ、つまり見出しがセクショニング・コンテンツの先頭にある場合、その見出しは、そのセクションの見出しであると認識されます。

<section>
<h2>見出し</h2>
<p>テキストテキストテキスト。</p>
</section>
<section>
<h2>見出し</h2>
<p>テキストテキストテキスト。</p>
</section>

上のようなマークアップをした場合、次のようなアウトラインが生成されます。

セクショニング・コンテンツで囲んだアウトライン

セクショニング・コンテンツを使ってセクションを区切り、それに伴ってアウトラインが生成されます。それぞれのセクションは、別の章として扱われます。

h2は、それぞれのセクションの見出しになります。

暗黙的にアウトラインを生成する
<h2>見出し</h2>
<p>テキストテキストテキスト。</p>
<h2>見出し</h2>
<p>テキストテキストテキスト。</p>

上ののように、セクショニング・コンテンツを使わなかった場合、アウトラインはどうなるのでしょうか。

見出しによる暗黙のアウトライン

このように、セクショニング・コンテンツで囲まなかったとしても、見出し(ヘッディング・コンテンツ)によって、暗黙的にアウトラインは生成されます。

しかしセクションは、セクショニング・コンテンツを使って、明示的にアウトラインを示すことが推奨されています。

フレージング・コンテンツ(phrasing)

フレージング・コンテンツには、段落内で使うような要素が該当します。強調など、テキストをマークアップする為の要素がこれに属するということです。

従来のインラインレベルの要素がフレージング・コンテンツに属します。

フレージング・コンテンツに属する要素は、同時にフロー・コンテンツにも属します。また一部は、エンベッディッド・コンテンツやインタラクティブ・コンテンツ、メタデータ・コンテンツにも属します。

エンベッディッド・コンテンツ(Embedded)

imgタグなど、文書内への埋め込みを行う際に使用する要素がエンベッディッド・コンテンツに含まれます。

エンベッディッド・コンテンツに属する要素は、同時にフレージング・コンテンツ及びフロー・コンテンツにも属します。そして一部はインタラクティブ・コンテンツにも属します。

インタラクティブ・コンテンツ(Interactive)

aタグや buttonタグといった、ユーザが操作する要素がインタラクティブ・コンテンツに含まれます。

インタラクティブ・コンテンツに属する要素は、同時にフロー・コンテンツにも属します。そして一部が、フレージング・コンテンツやエンベッディッド・コンテンツにも属します。

その他のカテゴリ

まとめ

コンテンツモデルとは、要素の配置の可否の基準となるモデルです。使う要素が、どのコンテンツカテゴリに属するかで、配置の可否が決まります。

各コンテンツカテゴリの概要は次の通りです。

メタデータ・コンテンツ(Metadata)
metaタグや linkタグなど、headタグの中で使用する要素。
文書情報などを表す為の要素が含まれる。
フロー・コンテンツ(Flow)
コンテンツを表示する為の、bodyタグの中で使うほとんどの要素が含まれる。
セクショニング・コンテンツ(Sectioning)
明示的にアウトラインを生成する為の要素。
sectionタグや articleタグなど、文章の、区分や節といった区切りを表す要素が含まれる。
ヘッディング・コンテンツ(Heading)
h1~h6タグといった見出しを表す要素。
フレージング・コンテンツ(Phrasing)
基本、文章内で使用する要素。
インラインレベルの考え方の要素が属する。
エンベッディッド・コンテンツ(Embedded)
画像や動画など、文書内に他のリソースを埋め込む為の要素が属する。
インタラクティブ・コンテンツ(Interactive)
対話型コンテンツ。
aタグや selectタグなど、ユーザが操作することのできる要素。