HTML5のセクションの使い方

HTML5 でのセクションと見出しの作り方について調べました。

セクショニングコンテンツとヘッディングコンテンツ

要素はコンテンツモデルを持っていて、コンテンツモデルで説明されている要求を満たす「コンテンツ」を持っている必要があります。「コンテンツ」はDOMの子要素のことです。
コンテンツモデルには以下の種類があり、セクショニングコンテンツとヘッディングコンテンツを使用してセクションと見出しを作成します。

メタデータコンテンツ（Metadata content）
フローコンテンツ（Flow content）
セクショニングコンテンツ（Sectioning content）
ヘッディングコンテンツ（Heading content）
フレージングコンテンツ（Phrasing content）
エンべディットコンテンツ（Embedded content）
インタラクティブコンテンツ（Interactive content）

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

セクショニングコンテンツは「ヘッディング」と「フッター」の範囲を定義するコンテンツです。「ヘッディング」は後述のヘッディングコンテンツのことです。「フッター」とはfooter要素のことです。
以下の要素がセクショニングコンテンツの要素です。

article
aside
nav
section

セクショニングコンテンツの要素は、潜在的に「ヘディング」と「アウトライン」を持っています。セクショニンングのルートとなる特定の要素が存在します。それらはセクショニングコンテンツではないが「アウトライン」を持つことができます。

ヘッディングコンテンツ

ヘッディングコンテンツはセクションのヘッダーです。
以下の要素がヘッディングコンテンツの要素です。

セクショニングルート

セクショニングルートはセクショニングのルートとなる特定の要素です。セクショニングルートはアウトラインを持つことができます。セクショニングルート内のセクションとヘッディングは親のアウトラインに影響しません。
以下の要素がセクショニングルートの要素です。

blockquote
body
details
dialog
fieldset
figure
td

ヘッディングとセクション

セクショニングコンテンツの中の初めのヘッディングコンテンツは、そのセクションの明示的な「ヘッディング」を表します。同じかより高いランクのヘッディングコンテンツは前のセクションの親のセクションの新しい暗黙のサブセクションを開始します。低いランクのヘッディングコンテンツは前のセクションのサブセクションを開始します。どちらの場合も暗黙のセクションを表しています。

「ヘッディング」はサブヘッディング、サブタイトル、代替タイトル、キャッチフレーズをマークアップするために使用してはいけません。

セクショニングコンテンツの要素は、他の見出しがどのような暗黙のセクションを作成したかに関係なく、最も近い親のセクショニングルートまたはセクショニングコンテンツのサブセクションと見なされます。

サブヘッディング、サブタイトル、代替タイトル、タグライン

HTMLには、サブヘッディング、サブタイトル、代替タイトル、キャッチフレーズをマークアップするためのメカニズムがありません。以下のように表すことができる。

ヘッダ要素を使用する

下記の例ではタイトルとサブタイトルがheader要素でグループ化され、目次にサブタイトルが含まれないようになっています。

1
2
3
4
5


<header>
  <h1>タイトル</h1>
  <p>サブタイトル</p>
  <p>その他の情報</p>
</header>

コロンで区切る

下記の例ではタイトルとサブタイトルが同じ行に表示されます。

1

<h1>タイトル: サブタイトル</h1>

spanを使用する

下記の例ではタイトルの一部がspan要素に含まれ、異なるスタイルを使用することができます。

1
2
3


<h1>タイトル <br>
  <span>サブタイトル</span>
</h1>