コンテンツ・モデルとは

コンテンツ・モデルとは、「〇〇要素の中には、△△要素が配置できる」といった、各要素ごとに中に配置できる要素を定義した配置ルールの事です。HTML5から登場した概念で、HTML5より前にあった、ブロックレベル要素と、インライン要素をもっと細かく定義し直した概念になります。このコンテンツ・モデルの多くは、要素のカテゴリー名で表されます。ただし、コンテンツ・モデルの中には、「特定の要素のみが配置可能」と表されていたり、「透明（親要素のコンテンツ・モデルを引き継ぐ）」などといったコンテンツ・モデルをもあります。

コンテンツ・モデルがカテゴリーの場合

コンテンツ。モデルの多くはカテゴリーで表されます。例えば、段落を表す<p>要素のコンテンツ・モデルは「フレージング・コンテンツ」です。つまり、<p> ~ </p>の中に入れるのは、フレージング・コンテンツというカテゴリーに属した要素のみということです。

<p>伝説のWEBクリエーターに、<em>おれ</em>はなる</p>

<p><div>伝説のWEBクリエーターに、おれはなる</div></p>

コンテンツ・モデルがカテゴリーの場合は、中に配置したい要素がそのカテゴリーに属しているかを確認してから配置するようにしましょう。

要素のカテゴリー

コンテンツ・モデルが特定の要素に限定されている場合

コンテンツ・モデルの中には「特定の要素しか入れない」と要素を限定されているパターンがあります。例えば、順不同リスト（箇条書き）を表す<ul>要素がこれにあたります。この<ul>要素のコンテンツ・モデルは「0個以上の<li>要素」です。つまり、<ul> ~ </ul>の中に直接配置できる要素は、リスト項目を表す<li>要素のみということです。

<ul>
  <li>会社概要</li>
  <li>サービス</li>
  <li>スタッフ</li>
  <li>お問い合わせ</li>
</ul>

<ul>
  <p>会社概要</p>
  <p>サービス</p>
  <p>スタッフ</p>
  <p>お問い合わせ</p>
</ul>

このように、中に入れる要素が限定されている場合は、コンテンツ・モデルで指定された要素のみを使うようにしましょう。

コンテンツ・モデルがトランスペアレントの場合

コンテンツ・モデルには「トランスペアレント」といって、透明というコンテンツ・モデルもあります。簡単に説明すると親要素（自分を直接挟んでいる要素）のコンテンツ・モデルと同じと考えて下さい。 例えば、リンクを生成する<a>要素が、この「トランスペアレント」になります。

<p>
  <a href="#">リンク先を<em>絶対に</em>見て！</a>
</p>

上記の例の場合は、「トランスペアレント」である<a>要素は、親要素である<p>要素のコンテンツ・モデルと同じになります。<p>要素のコンテンツ・モデルは「フレージング・コンテンツ」ですので、「フレージング・コンテンツ」に属する、強調を表す<em>要素は配置可能です。従って、上記の配置は正しい書き方です。

<em>
  <a href="#">
    <p>リンク先へ<p>
  </a>
</em>

上記の例の場合は、<a>要素は<em>要素のコンテンツ・モデル「フレージング・コンテンツ」と同じになります。従って、「フロー・コンテンツ」の<p>要素は配置できません。

最後にもうひとつ見てみましょう。

<article>
  <a href="#">
    <h2>リンク先<h2>
    <p>僕の秘密が書かれたページ<p>
  </a>
</article>

上記の場合、<a>要素は、独立したコンテンツを表す<article>要素のコンテンツ・モデルと同じになります。<article>要素のコンテンツ・モデルは「フロー・コンテンツ」ですので、「フロー・コンテンツ」の<p>要素は配置可能です。

この例は、HTML5より前では配置できませんでした。<a>要素は、HTML5より前のカテゴリでは、インライン要素でした。従って、ブロックレベル要素である<p>要素を中に配置することは出来ません。しかし、HTML5からは上記のようなケースでは配置可能になります。

少しややこしいですが、このように親要素と同じになるコンテンツ・モデルもあります。コンテンツ・モデルがトランスペアレントの場合は、親要素のコンテンツ・モデルを確認するようにしましょう。

関連するレッスン

要素の配置ルールとカテゴリー HTML 入門#05

要素の配置ルールであるコンテンツ・モデルを理解しましょう。