HTMLの基本概念～正しい文書構造を作るために～【HTML5プロフェッショナル認定試験レベル1】

この記事は「HTML5プロフェッショナル認定試験」取得へ向けた学習のアウトプット記事です。
「HTML5プロフェッショナル認定試験」についての詳細は公式サイト様（https://html5exam.jp/）をご確認ください。

未経験からWebコーダーへ就職する際「資格を取ろう・取らなければ」と考えている方は、ぜひ一度以下の記事も参考にご覧ください。

私は今、「HTML5プロフェッショナル認定試験」という資格を取得するための勉強をしています。この資格そのものに関して詳しくは語らないので、詳しいことを知りたい方は公式サイトをご確認ください。Web資格なら「HTML5プロフェッショナル認定...

HTML要素のカテゴリ
コンテンツ・モデル
1. トランスペアレント
セクショニング・ルート
まとめ
参考書籍・サイト
1. 書籍
2. サイト

HTML要素のカテゴリ

HTML5の要素は、主に以下の7つにカテゴリ分けされています。

フローコンテンツ
body要素直下に配置できる要素。body内であれば、配置位置は問われません。
見出しコンテンツ
文書の見出しとなる要素。h1～h6のみが該当します。
セクショニングコンテンツ
情報をセクション（章や節などのかたまり）に分ける要素。
組み込みコンテンツ
動画・音声などのコンテンツを埋め込むことができる要素。
メタデータコンテンツ
head内に記述して、文書のメタデータを提供する要素。
インタラクティブコンテンツ
クリックや入力など、ユーザーが操作することのできる部品を作る要素。
フレージングコンテンツ
インラインの性質を持った要素。

それぞれの要素が必ず1つのカテゴリに分類されている、というわけではありません。1つの要素が複数のカテゴリに属していたり、逆にどのカテゴリにも属さない要素もあります。親要素や、付与された属性（tabindex属性など）によって属するカテゴリが変わったりすることもあります。

コンテンツ・モデル

HTML5以前は、要素はそれぞれインライン要素とブロックレベル要素にカテゴリ分けされていました（特性はHTML5にも継承されています）。
インライン要素をまとめる単位としてブロックレベル要素が使用されていたため、インライン要素をbody直下に配置することができませんでした。

しかしHTML5では、インライン要素とブロックレベル要素というカテゴリ分けが廃止されました。その代わりにどの要素にどの要素を入れて良いのかが明確に定められており、それをコンテンツ・モデルといいます。

トランスペアレント

いくつかの要素は、親要素のコンテンツ・モデルを継承し、親要素のコンテンツ・モデルと同じになります。そうした要素をトランスペアレントと呼びます。

たとえば、中にフローコンテンツを含めることができる要素が親要素なら、トランスペアレントの要素の中にもフローコンテンツを入れることができます。

HTML5でトランスペアレントに分類されるのは以下9要素です。

a
ins
del
object
audio
video
canvas
map
noscript

説明を聞いただけだと、いまいち理解ができないと思うので、例を挙げて見てみましょう。

例1

<div class="box">
  <a href="#">
    <p>
      divのコンテンツ・モデル（子要素にできるカテゴリ）はフローコンテンツ。この例ではaはdivの子要素であり、divのコンテンツ・モデルを継承している。そのため、フローコンテンツであるpを含むことができる。
    </p>
  </a>
</div>

この例では、aはdivの子要素として存在しています。divのコンテンツ・モデル（子要素にできるカテゴリ）はフローコンテンツです。aはトランスペアレントですので、divのコンテンツ・モデルを継承し、フローコンテンツを含むことができます。そのため、上の例ではフローコンテンツであるpを子要素にしてOKです。

例2

<div class="box">
  <p>
    <a href="#">
      この場合、aはpの子要素。pのコンテンツ・モデル（子要素にできるカテゴリ）はフレージングコンテンツのため、このaはフレージングコンテンツしか含むことができない。（例1のように、中にpなどフレージングコンテンツに該当しない要素は含められない）
    </a>
  </p>
</div>

こちらの例では、aはpの子要素になっています。pのコンテンツ・モデルはフレージングコンテンツです。トランスペアレントの要素は、親要素のコンテンツ・モデルを継承するので、今のaのコンテンツ・モデルはフレージングコンテンツになっています。そのため、例1のようにpなどフレージングコンテンツに該当しない要素は中に入れることができません。

このように、トランスペアレントの要素は、同じ要素であっても親要素のコンテンツ・モデルが何なのかによって、自身のコンテンツ・モデルが変化します。