HTML5の要素カテゴリー

HTML5のコンテンツカテゴリー

HTML4やXMLでは、HTML要素はブロックレベル要素とインライン要素という区別をしていました。
HTML5ではこの区別ではなく、次の7つのカテゴリーが導入されました。

• メタデータコンテンツ (Metadata Content)
• フローコンテンツ (Flow Content)
• 見出しコンテンツ (Heading Content)
• 区分コンテンツ (Sectioning Content)
• 記述コンテンツ (Phrasing Content)
• インタラクティブコンテンツ (Interactive Content)
• 埋め込みコンテンツ (Embedded Content)

各カテゴリーの関係は次のようになります。

上記のカテゴリーとは別に、補助的なコンテンツカテゴリーが2つ定義されています。

• 知覚可能コンテンツ (Palpable Content)
• スクリプト対応要素 (Script-supporting Elements)

コンテンツカテゴリーについて詳しくは、W3Cの仕様書の「Content Model」に書かれています。
HTML5.2 – W3C(英文)

カテゴリーの特徴と属する要素を1つずつ解説していきます。

メタデータコンテンツ (Metadata content)

HTMLページの情報や挙動を定義するHTML要素です。

属するHTML要素

base要素、link要素、meta要素、noscript要素、script要素、style要素、template要素、title要素

フローコンテンツ (Flow content)

テキストや埋め込みコンテンツを含むHTML要素です。

属するHTML要素

a要素、abbr要素、address要素、area要素(map要素の子孫である場合)、article要素、aside要素、audio要素、b要素、bdi要素、bdo要素、blockquote要素、br要素、button要素、canvas要素、cite要素、code要素、data要素、datalist要素、del要素、details要素、dfn要素、dialog要素、div要素、dl要素、em要素、embed要素、fieldset要素、figure要素、footer要素、form要素、h1要素、h2要素、h3要素、h4要素、h5要素、h6要素、header要素、hr要素、i要素、iframe要素、img要素、input要素、ins要素、kbd要素、label要素、link要素(itemprop属性がある場合)、main要素、map要素、mark要素、math要素、meter要素、nav要素、noscript要素、object要素、ol要素、output要素、p要素、picture要素、pre要素、progress要素、q要素、ruby要素、s要素、samp要素、script要素、section要素、select要素、small要素、span要素、strong要素、style要素(scoped属性がある場合)、sub要素、sup要素、svg要素、table要素、template要素、textarea要素、time要素、u要素、ul要素、var要素、video要素、wbr要素、テキスト

見出しコンテンツ (Heading content)

コンテンツの見出しを表すHTML要素です。

属するHTML要素

h1要素、h2要素、h3要素、h4要素、h5要素、h6要素

区分コンテンツ (Sectioning content)

コンテンツの区分を示すHTML要素です。

属するHTML要素

article要素、aside要素、nav要素、section要素

記述コンテンツ (Phrasing content)

文章と、その中に含まれるHTML要素です。

属するHTML要素

a要素(記述コンテンツのみの場合)、abbr要素、area要素(map要素の子孫である場合)、audio要素、b要素、bdi要素、bdo要素、br要素、button要素、canvas要素、cite要素、code要素、data要素、datalist要素、del要素(記述コンテンツのみの場合)、dfn要素、em要素、embed要素、i要素、iframe要素、img要素、input要素、ins要素(記述コンテンツのみの場合)、kbd要素、label要素、link要素、map要素(記述コンテンツのみの場合)、mark要素、math要素、meter要素、noscript要素、object要素、output要素、picture要素、progress要素、q要素、ruby要素、s要素、samp要素、script要素、select要素、small要素、span要素、strong要素、sub要素、sup要素、svg要素、template要素、textarea要素、time要素、u要素、var要素、video要素、wbr要素、テキスト

インタラクティブコンテンツ (Interactive content)

ユーザーとやり取りするためのHTML要素です。

属するHTML要素

a要素(href属性がある場合)、audio要素(controls属性がある場合)、button要素、details要素、embed要素、iframe要素、img要素(usemap属性がある場合)、input要素(type属性が「hidden」ではない場合)、label要素、select要素、textarea要素、video(controls属性がある場合)

埋め込みコンテンツ (Embedded content)

HTMLページに外部リソースを読み込むためのHTML要素です。

属するHTML要素

audio要素、canvas要素、embed要素、iframe要素、img要素、math要素、object要素、picture要素、svg要素、video要素

知覚可能コンテンツ (Palpable content)

テキストなどを含んで表示されるHTML要素は全て知覚可能コンテンツとなります。
フローコンテンツや記述コンテンツは知覚可能コンテンツにも属します。

スクリプト対応要素 (Script-supporting Elemengts)

HTMLページの文書には直接関係しない、JavaScriptやテンプレートなどのコードを含むHTML要素

属するHTML要素

script要素、template要素

透過コンテンツモデル (Transparent content model)

存在していないのように表示されているHTML要素です。
次のようなHTMLの場合、a要素が透過コンテンツモデルに該当します。

コード例

<article>
	<a href="#">
		<p><time datetime="2018-08-01">2018.08.01</time></p>
		<h1>透過コンテンツモデルについて</h1>
		<p>透過コンテンツモデルとは、存在していないのように表示されているHTML要素です。</p>
	</a>
</article>

p要素やh1要素はテキストが表示されますが、リンク範囲を指定しているa要素は物理的なコンテンツとしては視覚できません。
このように、ページの機能としては役立っているけれど、視覚的には存在しているか分かりづらいものを「透過コンテンツモデル(Transparent content model）と呼びます。

属するHTML要素

a要素、ins要素、del要素、canvas要素、map要素

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。