[38-1] 「コンテンツ・モデル」で要素のルールを見てみよう

最終更新日:2017年11月11日  (初回投稿日:2012年02月23日)

HTML5では「要素内にどんな要素を置くか」が決められています。
このルールをコンテンツ・モデル(Content models)といいます。
「コンテンツ(Content)」はここでは「要素の中身」、「モデル(models)」は「型式」といった意味です。

コンテンツ・モデルはすべての要素に定義されていて、そのとおりに使わないとNG。

コンテンツ・モデルには、前回の7つのカテゴリーが使われることが多いですが、カテゴリーに関係ない定義もあります。
ざっと下の5パターンに分類されます。

決まったカテゴリーの要素が入る 中に入れていい要素が、7つのカテゴリーのうちのどれか決まっている要素。
空(何も入れない) 中に何も入れてはいけない要素。
終了タグが無い <br> <hr> などの要素もコレに該当。
特定の要素が入る カテゴリーに関係なく、中に入る要素が決まっている要素。専用の子要素を持つ要素が該当します。
子孫まで制限される 子要素だけでなく、子孫(孫や曾孫やもっと先)の要素にも「これは入れちゃダメ」と制限がある要素。
トランスペアレント 自分の親要素(自分が囲まれてる要素)のコンテンツ・モデルを継承する要素。
本日のINDEX
  1. コンテンツ・モデルは 仕様書で調べます
  2. 「決まったカテゴリーの要素が入る」コンテンツ・モデル
  3. 「空(何もいれない)」のコンテンツ・モデル
  4. 「特定の要素が入る」コンテンツ・モデル
  5. 「子孫まで制限される」コンテンツ・モデル
  6. 「トランスペアレント」というコンテンツ・モデル
  7. 「パルパブル・コンテント」のルール

2017年11月:パルパブル・コンテントを追加。また、リンク先を HTML5.1勧告 に更新しました。

コンテンツ・モデルは 仕様書で調べます

各要素のコンテンツ・モデルは、W3C(または WHATWG )の仕様書で調べます。

W3C の仕様書はこちら。
HTML 5.1 - 2nd Edition - W3C Recommendation
これはインデックスページです。目的の要素をブラウザの検索機能などで探して、クリック。

WHATWG の仕様書はこちらです。
HTML Living Standard

例えば、W3Cの仕様書で <p>要素 を見たらこんなかんじです。

この要素の「カテゴリー」「どこに置けるか」「コンテンツ・モデル」「使える属性」などが一目瞭然。

WHATWG の仕様書も同じようなパターンです。

「決まったカテゴリーの要素が入る」コンテンツ・モデル

ほとんどの要素のコンテンツ・モデルは、前回やった「7つのカテゴリー」のうちのどのカテゴリーの要素が入るか 決められています。
1つのカテゴリーだけのもあるし、複数カテゴリーのものもあります。
子要素に関してのルールです。(子孫まで制限するルールは別にあります)

例えば、<p>要素のコンテンツ・モデルは「フレージング・コンテント」のみと決められています。(<p>要素の子要素はフレージング・コンテントに属する要素しかダメという意味)

ですので、下記のマークアップは恐ろしいほど(笑)間違っています。

<!--これはNGな例です-->
<p>
  <section>
    <h1>見出し</h1>
    テキスト
  </section>
  <h2>リストのタイトル</h2>
  <ul>
    <li>リストアイテム</li>
    <li>リストアイテム</li>
  </ul>
</p>

<section>要素は「セクショニング・コンテント」ですし、<h2>要素は「ヘディング・コンテント」、<ul>要素は「フロー・コンテント」なので、いずれも <p>要素の子要素にはできません。

下記のマークアップなら大丈夫。

<p>
  テキスト<mark>テキスト</mark>テキスト。<br>
  <a href="ex.com/exex.html">テキストテキスト<br>
  <img src="image/image.jpg"></a>
</p>

「テキスト」も、<mark>要素も <br>要素も「フレージング・コンテント」です。
href属性のある<a>要素は「インタラクティブ・コンテント」かつ「フレージング・コンテント」でもあります。

どの要素が何のカテゴリーかは、前回「各要素のカテゴリー分け」の図にしておきましたので見てみてください。

「空(何もいれない)」のコンテンツ・モデル

コンテンツ・モデルが「空(Nothing)」とされているものは、その要素の中に何もコンテンツを入れられないというルール。

<colgroup>要素の「span属性」があるとき、<script>要素の「src属性」があるときが該当します。要素内は空(Nothing)でなくてはいけません。

また、終了タグの無い要素は、当然だけど このコンテンツ・モデルに該当します。
br, wbr, hr, img, meta, base, link, source, param, embed, area, col, imput, keygen などが該当。

「特定の要素が入る」コンテンツ・モデル

カテゴリーでなく特定の要素が入るルールになっている要素もあります。
専用の子要素を持っている要素が該当します。

例として <table>要素のコンテンツ・モデルです。

4.9.1. The table element
Content model:
In this order: optionally a caption element, followed by zero or more colgroup elements, followed optionally by a thead element, followed by either zero or more tbody elements or one or more tr elements, followed optionally by a tfoot element, optionally intermixed with one or more script-supporting elements.

<table>要素は、専用の子要素がいっぱいあるので、コンテンツ・モデルも細かい。

直訳です。
この順番で入ります: オプションで1つの caption要素、0個以上のcolgroup要素、オプションで1つの thead要素、0個以上の tbody要素か 1個以上の tr要素、オプションで tfoot要素、オプションで、任意の場所に 1 個以上のスクリプトサポート要素。
(スクリプトサポート要素とは <script>要素または <template>要素)

「オプションで1つの」とか「0個以上の」とかは「無くてもいい(入れるならココ)」と言っています。
じっくり読んでくと、1個は必要なのが <tr>要素だと言ってるのがわかります。
(ほんっとに わかりにくいんだよね。仕様書の書き方って...ww)

ですので、下のソースはNGです。
1個以上の <tr>要素が無いし、<caption>要素が最後に入っていたりしますから。

<!--これはNGな例です-->
<table>
    <td>テキスト</td>
  <caption>テーブルのタイトル</caption>
</table>

下のマークアップはOKです。

<table>
  <caption>テーブルのタイトル</caption>
	<tr>
      <td>テキスト</td>
	</tr>
</table>

「子孫まで制限される」コンテンツ・モデル

ここまでは「子要素」にどんな要素が入れられるかというルールでした。
でも、子要素だけでなく、子孫の要素も制限するコンテンツ・モデルもあります。

例えば、<address>要素のコンテンツ・モデルを見てみましょう。

4.3.9. The address element
Content model:
Flow content, but with no heading content descendants, no sectioning content descendants, and no header, footer, or address element descendants.

直訳です。
フロー・コンテント、ただし子孫に「ヘッディング・コンテント」「セクショニング・コンテント」の要素がないこと。そして子孫に <header> <footer> <address>要素がないこと。

下の例は、 <a>要素はフロー・コンテンツなのでOK。

<address>
  詳細につきましてはこちらにご連絡ください。
  <a href="exex.com/mailform.html">ジョン・スミス</a>
</address>

下の例はNG。

<!--これはNGな例です-->
<address>
  <header>
    <h3>スタッフへの連絡先</h3>
    <p>詳細につきましてはこちらにご連絡ください。</p>
  </header>
  <nav>
    <a href="exex.com/mailform1.html">ジョン・スミス</a>
    <a href="exex.com/mailform2.html">トマス・ハリス</a>
    <a href="exex.com/mailform3.html">ビル・ゲイツ</a>
  </nav>
</address>

使っちゃいけない <header>要素があり、その中に「ヘディング・コンテント」の <h3>要素を使っているし、「セクショニング」の <nav>要素も使っています。

「トランスペアレント」というコンテンツ・モデル

トランスペアレント・コンテンツ・モデル(Transparent content models)とは、
親要素のコンテンツ・モデルを受け継ぐコンテンツ・モデル。
親要素に入れられる要素しか入れられません。
トランスペアレント(Transparent)とは「透明」という意味。

透け感がある服の素材を、「シースルー(see-through)」と昔は言いましたが、いまは「トランスペアレント」とも言うんだって。

例えば <a>要素のコンテンツ・モデルは「トランスペアレント」です。

4.5.1. The a element
Content model:
Transparent, but there must be no interactive content or <a> element descendants.

直訳です。
トランスペアレント。ただし子孫に「インタラクティブ・コンテント」または <a>要素がないこと。

下は OKな例です。

<section>
  <a href="exex.com"><mark>ほんっとにはじめてのHTML5とCSS3</mark>を更新しました。</a>
</section>

<section>要素のコンテンツ・モデルは「フロー・コンテンツ」なので、 <a>も「フロー・コンテンツ」を継承しています。 <mark>は「フロー・コンテンツ」なのでOK。

こちらは NGな例。

<!--これはNGな例です-->
<em>
  <a href="exex.com"><h3>ほんっとにはじめてのHTML5とCSS3</h3>を更新しました。</a>
</em>

<em>要素 のコンテンツ・モデルは「フレージング・コンテント」なので、<a>も「フレージング・コンテント」を継承。
<h3>要素は「ヘディング・コンテンツ」なのでNGです。

「パルパブル・コンテント」のルール

パルパブル・コンテント(Palpable content)というカテゴリーもあります。
Palpable(パルパブル)は、「明瞭な」「明らかな」といった意味。
ブラウザ上で「明らかにコンテンツと認識できる内容の要素」といったところ。

コンテンツ・モデルが「フロー・コンテント」or「フレージング・コンテント」の要素は、内部に「hidden属性」が指定されていないパルパブル・コンテンツを1個以上持つ必要があります。

ただこのルール、それほど厳密なものではないらしく、後でスクリプトで内容を入れるために要素内が空になっている場合や、テンプレートの一部の場合は、空でもいいとされています。

以下がパルパブル・コンテントの要素です。けっこうあります。
a、abbr、address、article、aside、audio (controls属性がある場合)、b、bdi、bdo、blockquote、button、canvas、cite、code、data、details、dfn、div、dl (子要素に少なくとも1つの「name-value」グループがある場合)、em、embed、fieldset、figure、footer、form、h1〜h6、header、i、iframe、img、input (type属性がhiddenじゃない場合)、ins、kbd、keygen、label、main、map、mark、math、meter、nav、object、ol (子要素に少なくとも1つのli要素がある場合)、output、p、pre、progress、q、ruby、s、samp、section、select、small、span、strong、sub、sup、svg、table、textarea、time、u、ul (子要素に少なくとも1つのli要素がある場合)、var、video、要素間空白でないテキスト。

次回予告

いかがでしたか? 
各要素をその役目どおりに使っていれば、それほどむずかしいルールでは無さそう。
ただし「この要素の中にコレを書いてもいいのかな?」と迷ったら、とにかく仕様書を確認しよう。

次回は各要素ごとに決まっているコンテンツ・モデルを一覧表にまとめます。
どの要素がどのカテゴリーに属すか、図で探すより便利なように...。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.