【HTML】コンテンツ・モデル、カテゴリーについて【各要素のマークアップのルールや分類などを表します】

コンテンツ・モデルやカテゴリーを理解できれば、HTML5のマークアップをスムーズに記述できます！

コンテンツ・モデルとは？

HTMLの記述では、例えば、『<p>本文の<a href=”sample.html”>テキスト</a>です。</p>』というように、要素（p要素）の中に要素（a要素）を含めて記述することができます。

つまり、親要素（例えば、p要素）の中に、子要素（例えば、a要素）を含めるように、記述することができます。

しかし、この「親要素と子要素との関係」について、どのような組み合わせでも良いというわけではなく、この「親要素と子要素との関係」には、ルールが設定されています。

そのため、このルールとして、HTMLの各要素にはそれぞれ、『コンテンツ・モデル』が設定されています。

例えば、p要素には、『コンテンツ・モデル』として「フレージング・コンテンツ」が設定されています。

これは、言い換えると、「p要素を親要素とする場合、そのp要素の中に、子要素として、フレージング・コンテンツしか含めることができません。」という意味になります。

具体的には、例えば、以下の記述内容になります。

<p>ここの内容は<strong>重要事項</strong>になります。</p>

つまり、p要素の『コンテンツ・モデル』は「フレージング・コンテンツ」が設定されているため、上記のソースコードの通り、親要素であるp要素の子要素として、『カテゴリー』が「フレージング・コンテンツ」であるstrong要素が記述されています。

このように、『コンテンツ・モデル』を理解することで、親要素と子要素との関係を適切に整理することができ、コードを適切に記述することができます。

なお、『（カテゴリーが）「フレージング・コンテンツ」であるstrong要素』の意味については、次の『カテゴリー』の項目で説明致します。

カテゴリーとは？

HTML5において、各要素は、主に以下の７つの要素に分類されています。そして、その分類された『カテゴリー』を踏まえ、『コンテンツ・モデル』に基づいた記述を行う必要があります。

メタデータ・コンテンツ

Webページのタイトルやメタデータ等、HTML文書の概要を記述するための要素です。HTML文書の中では、head要素の中で記述される要素が、メタデータ・コンテンツに属します。

フロー・コンテンツ

HTML文書の本体（内容）を記述するための要素です。HTML文書の中では、body要素の中で記述される要素が、フロー・コンテンツに属します。

セクショニング・コンテンツ

文章の区分や節等、コンテンツの固まりの階層構造（アウトライン）を定義する要素です。

ヘディング・コンテンツ

文章の中で、見出しを表す要素です。

フレージング・コンテンツ

文章内のテキスト、及び段落内のテキストをマークアップするための要素です。

エンベディッド・コンテンツ

HTML文書に、外部リソースを埋め込むための要素です。外部リソースは、画像、動画、音声等のコンテンツに相当します。

インタラクティブ・コンテンツ

ユーザーが操作することができるコンテンツ（入力フォーム等）を表す要素です。

その他の特殊なマークアップルール

その他の特殊なマークアップのルールについても見ていきましょう。

トランスペアレント・コンテンツ（コンテンツ・モデル）

『コンテンツ・モデル』として「トランスペアレント・コンテンツ」に属する要素は、親要素のコンテンツ・モデルを引き継ぐ性質を持っています。このため、親要素によって、中に含めることができる要素が変わります。

例えば、トランスペアレント・コンテンツに基づく記述は、以下のようになります。

<div><a href=”sample.html”><p>この内容は重要です。</p></a></div>

サンプルのソースコードのうち、a要素のコンテンツ・モデルは、トランスペアレント・コンテンツです。そして、div要素のコンテンツ・モデルは、フローコンテンツになります。このため、a要素のコンテンツ・モデルもフロー・コンテンツとなり、a要素の中には、カテゴリーがフロー・コンテンツであるp要素を含めることができます。

なお、コンテンツ・モデルの観点から自由度の高いトランスペアレント・コンテンツですが、そのトランスペアレント・コンテンツの中に、カテゴリーがインタラクティブ・コンテンツである要素を含めることは禁止されています。

パルパブル・コンテンツ（カテゴリー）

『カテゴリー』として、「パルパブル・コンテンツ」に属する要素は、その中に、hidden属性が指定されていない要素を１つ以上含める必要があります。

ここで、hidden属性は、全ての要素に指定が可能なグローバル属性の一つです。そして、要素にhidden属性を指定することで、ブラウザ上において、その要素の非表示を可能にする属性です。

すなわち、パルパブル・コンテンツに属する要素は、「ブラウザ上において、非表示にしてはならない」ということになります。

しかしながら、実際のコーディングにおいては、パルパブル・コンテンツの中が空となるように記述した場合であっても、ブラウザ上の表示に問題が生じることもないため、過剰に注意する必要性は無い、とも解釈されています。

セクショニング・ルート（カテゴリー）

「カテゴリー」として、「セクショニング・ルート」に属する要素は、セクションのルートとして扱うことが可能な要素になります。つまり、セクショニング・ルートに属する要素は、独自のアウトライン（階層構造）を持つことができます。

例えば、セクショニング・ルートに基づく記述は、以下のようになります。

<section>
	<h1>見出し</h1>
	<p>テキスト</h>
	<blockquote>
		<h2>引用タイトル</h2>
		<p>引用文の内容</p>
	</blockquote>
</section>

上記のソースコードでは、親要素であるsection要素の中に、子要素であるblockquote要素が記述されています。そして、親要素（section要素）の中には見出しとしてh1要素が記述されており、子要素（blockquote要素）の中においても見出しとしてh2要素が記述されています。

ここで、blockquote要素は、セクショニング・ルートに属する要素であるため、独自のアウトラインを持つことになります。このため、blockquote要素の中の見出し（h2要素）は、section要素の中の見出し（h1要素）とは関係を持つことなく、独立した見出しとしてブラウザ上で認識されます。

以上、コンテンツ・モデルやカテゴリーについて、ご参考になさってください！