Uncategorized

【HTML5プロフェッショナル認定試験】コンテンツ・モデルの概念を理解する

2022年8月31日

スニーキーです。

ことの発端は会社がHTML5プロフェッショナル認定試験の受験を必須にし、あと受験日まで1ヶ月しかないと焦り始めた。
本を読み始めて最初の5分でコンテンツ・モデルという意味不明な概念が出てきたので調べてみた。

ある程度理解した俺が分かりやすく説明してみるので付き合ってほしい。

ブロックレベル要素とインラインレベル要素とは

まずは以下を見て欲しい。

間違った例

<span>
    <p>
        <div>Hello World!</div>
    </p>
</span>

正しい例

<div>
    <p>
        <span>Hello World!</span>
    </p>
</div>

ブロックレベル要素をインラインレベル要素で囲むのは間違え。インラインレベル要素はブロックレベル要素と違い横幅と高さが指定できない。

※ブロックレベル要素は基本横に並ばなく、横いっぱいに広がる。
※インラインレベル要素は文章の中の一部を装飾する要素だと思っておけばオッケー。

HTML5以前はこのように、この要素はインライン要素だからブロック要素を囲めないよねといった感じで書かれていたらしい。しかし、HTML5から考え方が少し代わり、これからはこの要素はこのコンテンツ・モデルだからこの要素とこの要素なら子要素として配置できるよねといった考え方に変わった。

コンテンツ・モデルとは

どの要素にどの要素を入れることができるか(子要素として配置してオッケーか)を明治的に示した配置ルールの事。たとえばdiv要素には子要素としてp要素を入れられるが、span要素にはdiv要素を入れられない。

※ほとんどの要素はフロー・コンテンツに所属する。
※htmlやbody要素など、どのカテゴリーにも属さない要素もある。
※a要素やspan要素など、複数のカテゴリーに属する要素もある。

要素のカテゴリー

コンテンツ・モデルの分類名 役割
1 メタデータ・コンテンツ
(Metadata conetnt)		 文書情報や他の文書との関係を定義するもの
2 フロー・コンテンツ
(Flow content)		 子孫にテキストなどを持つもの
3 セクショニング・コンテンツ
(Sectioning content)		 見出しと概要を付けられるもの
4 ヘッディング・コンテンツ
(Heading content)		 セクションの見出しとなるもの
5 フレージング・コンテンツ
(Phrasing content)		 段落などの中に含まれる文節・語句など
6 エンベッディッド・コンテンツ
(Embedded content)		 文書に他のリソースを埋め込むもの
7 インタラクティブ・コンテンツ
(Interactive content)		 ユーザーによる操作に対応するもの

（参照：HTML5リファレンス）

要素名
カテゴリ(要素がどのコンテンツ・モデルに所属するか)
コンテキスト(どの要素の子要素として自分が入れるのか)
コンテンツ・モデル(どの要素なら自分の子要素として受け入れるか)

要素名 カテゴリ(要素がどのコンテンツ・モデルに所属するか) コンテキスト(どの要素の子要素として自分が入れるのか) コンテンツ・モデル(どの要素なら自分の子要素として受け入れるか)
div フロー・コンテンツ
(Flow content)		 フロー・コンテンツ
(Flow content)		 フロー・コンテンツ
(Flow content)
p フロー・コンテンツ
(Flow content)		 フロー・コンテンツ
(Flow content)		 フレージング・コンテンツ
(Phrasing content)
s フロー・コンテンツ
(Flow content)		 フレージング・コンテンツ
(Phrasing content)		 フレージング・コンテンツ
(Phrasing content)

誤った例

<span> <!-- フロー/フレージング （フレージングしか入れたくない） -->
    <p> <!-- フロー （フレージングしか入れたくない） -->
        <div>Hello World!</div> <!-- フロー （フローしか入れたくない） -->
    </p>
</span>

正しい例

<div> <!-- フロー （フローしか入れたくない） -->
    <p> <!-- フロー （フレージングしか入れたくない） -->
        <span>Hello World!</span> <!-- フロー/フレージング （Pフレージングしか入れたくない） -->
    </p>
</div>

結論、コンテンツ・モデルとはどの要素にどの要素を入れることができるか。

コンテンツ・モデルで定義されているのはその要素がどの要素を子要素として直接入れられるのかで、孫やひ孫となる要素などは含まない。

HTML5は要素数が膨大なため全て覚える必要はもちろんないがコンテンツ・モデルといった概念はHTML5プロフェッショナル認定試験に出てくるので資格取得を目指してる人は私と一緒ぜひ頑張ってほしい。

試験が終ったら感想と結果も記録しておくので見て欲しい。

参照にしたもの

http://www.htmq.com/html5/007.shtml
https://qiita.com/yu310fu/items/06dd90901490ba1b619d

-Uncategorized