コンテンツ・モデルとは

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

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

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

正:<p>要素の中にフレージング・コンテンツの要素を配置した例
<p>伝説のWEBクリエーターに、<em>おれ</em>はなる</p>
<em>要素のコンテンツ・モデル: フレージング・コンテンツ
誤:<p>要素の中にフレージング・コンテンツ以外の要素を配置した例
<p><div>伝説のWEBクリエーターに、おれはなる</div></p>
<div>要素のコンテンツ・モデル: フロー・コンテンツ

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

要素のカテゴリー

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

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

正:<ul>要素の子要素に<li>要素を配置した例
<ul>
  <li>会社概要</li>
  <li>サービス</li>
  <li>スタッフ</li>
  <li>お問い合わせ</li>
</ul>
誤:<ul>要素の子要素に<li>要素以外の要素を配置した例
<ul>
  <p>会社概要</p>
  <p>サービス</p>
  <p>スタッフ</p>
  <p>お問い合わせ</p>
</ul>

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

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

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

正:フレージング・コンテンツを含んだ<a>要素をフロー・コンテンツ内にを配置した例
<p>
  <a href="#">リンク先を<em>絶対に</em>見て!</a>
</p>

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

誤:フロー・コンテンツを含んだ<a>要素をフレージング・コンテンツ内にを配置した例
<em>
  <a href="#">
    <p>リンク先へ<p>
  </a>
</em>

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

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

正:フロー・コンテンツを含んだ<a>要素をフロー・コンテンツ内にを配置した例
<article>
  <a href="#">
    <h2>リンク先<h2>
    <p>僕の秘密が書かれたページ<p>
  </a>
</article>

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

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

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

関連するレッスン