コンテンツモデルとコンテキスト

html

コンテンツモデルとコンテキスト

コンテンツモデル

HTML5では正しい文章構造を実現するために、要素内に記述できる要素が決まっています。
これを「コンテンツモデル」といいます。

要素は7種にカテゴリ分けされ、要素内に記述できるコンテンツが予め決められています。 要素は0個以上のカテゴリに属しており、どこにも属さないものや複数カテゴリに属しているものもあります。 以下が7種のカテゴリです。

コンテンツ名含まれる要素
メタデータコンテンツメタデータやスタイル
<meta><link>など
フローコンテンツ文章やアプリで使うコンテンツ
<section><p>テキストなど
セクショニングコンテンツセクションなどの範囲
<section><article><aside>など
ヘッディングコンテンツ見出し
<h1><h2>など
フレージングコンテンツテキストの要素
<br><em>など
エンデッディドコンテンツ他言語・リソース
<canvas><video>など
インタラクティブコンテンツユーザーが操作できるもの
<button><audio>など

カテゴリの関連図は下のようになっています。 例えばフローコンテンツ内には、一部のメタデータコンテンツを除いた要素を記述できます。 微妙に枠が重なっているのは、カテゴリのみでは判断できない要素があるためです。 詳細はこちらの一覧表を参照してください。

element-category

コンテキスト

要素を記述できる場所を「コンテキスト」といいます。 例えば<p>要素のコンテキストは「フローコンテンツが期待される場所」となっています。 これは<article>などの「コンテンツモデルがフローコンテンツの要素」内に記述できるという事です。

まとめ

実際の仕様は覚えきれるようなものではなく、文書構造が間違っていても問題なく表示させることができたりします。 しかし誤ったマークアップはメンテナンス性や可読性の低下、ひいてはサイトの質の低下を招きます。 日ごろから正しい記述を心がけたいですね。

コンテンツモデルとコンテキストに則ったマークアップ例

基本的な記事の文書構造を、以下の要素を使ってマークアップしてみましょう。

要素カテゴリコンテキストコンテンツモデル
articleフローコンテンツ
セクショニングコンテンツ
フローコンテンツが期待される場所フローコンテンツ
h1フローコンテンツ
ヘッディングコンテンツ
フローコンテンツが期待される場所フレージングコンテンツ
pフローコンテンツフローコンテンツが期待される場所フレージングコンテンツ
テキストフローコンテンツ
フレージングコンテンツ
フレージングコンテンツが期待される場所

<article>のコンテンツモデルは「フローコンテンツ」なので、フローコンテンツである<h1>要素や<p>要素を記述できます。 <h1>要素や<p>要素のコンテンツモデルは「フレージングコンテンツ」なのでテキストを記述できます。

なので以下のような形はHTMLとして正しい書式です。

<article>
  <h1>見出し</h1>
  <p>テキスト</p>
</article>

これで記事のマークアップができました。 このように要素のコンテンツモデルを意識してマークアップすれば、正しい文書構造でHTML文書を記述することができます。

アマルウェブ HOME