HTML & CSS

基礎

HTML

HTML5の要素カテゴリー

HTML5になってから新しく導入されたHTML要素のカテゴリーについて、特徴と属する要素を解説します。

この記事のポイント

  • HTML5の要素カテゴリーについて基本的な特徴が分かる
  • 各カテゴリーに属するHTML要素を知る
  • 透過コンテンツモデル(トランスペアレント)のイメージが掴める

目次

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要素

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。