要素の入れ子と内容モデル-プログラミング・本のブログ
自身のアウトプットも兼ねてつれづれと書き続けるブログ。
HTML解体新書ー仕様から紐解く本格入門 [ 太田 良典 ]
前回からの続きです。
要素の入れ子のルール[04]
<p>この<mark>キーワード<mark>はテストに出ます
上記の例のようにp要素の子要素としてmark要素が入れ子になっています。この記述はルール上問題ありません。ただしmark要素の子要素としてp要素を入れ子とはできません。このような使用を内容モデル（content model）と呼びます。
内容モデルの定義
＜＜画像＞＞
HTML仕様の各要素の説明にはcontent modelの項目があり、そこで内容モデルが定義されています。先ほどのp要素とmark要素は、いずれも以下のようになっています。
content model:
Phrasing content.
子としてPhrasing contentを持つことができることが定義されてます。Phrasing contentは要素のカテゴリー（categories）の１つでmark要素を含み数多くの要素が該当します。ただしp要素はPhrasing contentに属していないので、mark要素の子要素としてp要素を入れ子に出来ないわけです。
【カテゴリーによる内容モデルの定義】
カテゴリーの仕様は以下のようなものがあります。
- Metadata content
- Flow content
- Secctioning content
- Heading content
- Phrasing content
- Interactive content
上記に属さない要素や複数のカテゴリーに属する要素もあります。内容モデルの定義によく出てくるのは、Metadata、Flow、Phrasingの３つです。
・Metadata
HTML文章のメタデータを扱う要素が属します。原則、head要素内で使用され、画面上に表示されることはありません。link、meta、title要素などが属します。
・Flow
HTML文章のコンテンツ内で使える要素のほとんどがFlowに属します。要素の内容モデルがFlowと定義されている場合、ほぼ任意の要素を子要素にできると考えて良いでしょう。ただし、Metadataやli要素、tr要素など、特定の要素を親に持つ必要があるものを除きます。
・Phrasing
Flowに属する要素のうち、特に段落内のテキストに使用される要素がPhrasingに属します。Phrasingにはa、em、img、span、mark要素などが属します。
【要素間のASCII空白文字の扱い】
スペースや改行などのASCII空白文字は、内容モデルの妥当性の判断においては特殊な扱いになります。下記の例のように改行とインデント入れたASCII空白文字をinter-element whitespace（インターエレメントホワイトスペース？）と呼びます。
<ul>
<li>テキスト</li>
</ul>
内容モデルの考慮においてはinter-element whitespaceは無視されます。ただし、JavaScriptには何らかの影響を与えるようなので、そこは注意が必要です。
