HTML5 ヘッディングコンテンツ 2014.12.14
HTML5 基本
ヘッディングコンテンツとは
ヘッディングコンテンツとは、セクションの見出しとなる要素のことです。
具体的に挙げると、h1要素、h2要素、h3要素、h4要素、h5要素、h6要素の6つの要素のことです。
これらの要素の1~6という数字は、見出しの階層を表しています。
1が最も上の階層（大見出し）で、6が最も下の階層（最小の見出し）となっています。
以下の表の の部分がヘッディングコンテンツ要素です。
| セクショニングコンテンツ | |||||
|---|---|---|---|---|---|
| ルート要素 | html | ||||
| メタデータ関連 | head | title | base | link | meta |
| style | script | noscript | |||
| セクション関連 | body | section | article | aside | nav |
| h1~h6 | main | header | footer | address | |
| テキストのグループ | p | hr | pre | blockquote | div |
| ol | ul | li | |||
| dl | dt | dd | figure | figicaption | |
| テキストの一部 | a | em | strong | small | s |
| cite | q | dfn | abbr | time | |
| code | var | samp | kbd | span | |
| i | b | u | sub | sup | |
| mark | bdi | bdo | br | wbr | |
| ins | del | ruby | rt | rp | |
| 組み込み関連 | img | iframe | embed | object | param |
| video | audio | sourse | track | canvas | |
| map | area | ||||
| 表関連 | table | caption | tr | th | td |
| tbody | thead | tfoot | col | colgroup | |
| フォーム関連 | form | fieldset | legend | label | input |
| textarea | select | datalist | optgroup | option | |
| button | keygen | output | progress | meter | |
| インタラクティブ関連 | details | summary | command | menu | dialog |
hgruopは削除
HTML5仕様策定の過程で、hgroupという要素がありましたが、現段階（勧告）で削除されました。
アウトラインについて
HTML5では、セクションと見出しによる階層構造のことを「アウトライン」と呼びます。
セクションとは、見出し（ヘッディングコンテンツ）やセクショニングコンテンツ（section/article/aside/nav）要素から始まる、文章のまとまりのことを意味します。
その文章のまとまりを示す、本来は見えない枠がアウトライン（直訳すると外形、輪郭）です。
（以下の図では赤と青の線でアウトラインを視覚的に示しています）
見出し（ヘッディングコンテンツ）がセクショニングコンテンツの先頭にあった場合、その見出しはそのセクションの見出しであると認識されます。
例えば、上の図では一番最初のsection要素の先頭にh2要素（見出しA）があるため、そのh2要素は最初のセクションの見出しとなります。
このようにしてセクション（アウトライン）は生成されていきますが、セクショニングコンテンツがない場合もセクションは生成されます。
このセクショニングコンテンツがなく、見出し（ヘッディングコンテンツ）のみによって認識されるセクションを「暗黙のセクション」と呼んでいます。
暗黙のセクション
暗黙のセクションには、
前の見出しの階層と同じ、もしくは上の（数字が小さい）見出しが出現した場合は前のセクションを終了させ、そこから新しいセクションを開始する。
前の見出しよりも階層が下（数字が大きい）の見出しが出現した場合は、前のセクションを終了させずに、前の見出しのセクションの内部に含まれるサブセクションを開始する。
というルールがあります。
（言葉よりもコードを見た方が分かりやすいと思います）
|
1 2 3 4 5 6 |
<h2>見出しA</h2> <!--セクションスタート--> <h3>見出しA-1</h3> <!--下の階層の見出し出現→サブセクションスタート--> <h3>見出しA-2</h3> <h2>見出しB</h2> <!--上の階層の見出し出現→新たなセクションスタート--> <h3>見出しB-1</h3> <!--下の階層の見出し出現→サブセクションスタート--> <h3>見出しB-2</h3> |
このように、セクショニングコンテンツを使わなくても、暗黙のセクションによってアウトラインは生成されますが、W3cではセクショニングコンテンツを使用して明確に示すことを推奨しています。
セクショニングルート
body要素や、blockquote要素など、その要素自身のアウトラインを持つことができる要素をセクショニングルートと呼びます。
セクショニングルートの内部に含まれるセクションや見出しは、そのセクショニングルートの外側のアウトラインに一切影響を与えないという特徴を持ちます。
セクショニングルートを持つ要素は以下の要素です。
- body要素（ページ全体）
- blockquote要素（ブロックレベル引用文）
- fieldset要素（フォーム関連部品のグループ）
- figure要素（図版）
- td要素（表のセル）
このセクショニングルートとの関連として、
セクショニングコンテンツの各要素（section/article/aside/nav）には常に、それを含む上の階層のセクショニングルート、またはセクショニングコンテンツのうち、最も近いもののサブセクションとして認識される、という特徴があります。
（言葉ではちょっとわかりづらいので、以下に補足を用意しました。長いので分かる方は読まない方がいいかもしれません）
セクショニングルートとセクショニングコンテンツ
セクショニングルート（blockquote要素）とセクショニングコンテンツ（section要素）を含めたHTMLのアウトラインは以下のようになります。
このアウトラインをさらに単純にすると、
- 見出しA
- 見出しA-1
- 見出しA-2
- 見出しA-3
のようになり、
body要素の中に見出しA-1、見出しA-2、見出しA-3の3つの大きなセクションを含んでいることがわかります。
上から順に見ていくと、まずh1要素の出現により、見出しAセクション（以下見出しA）が始まります。
この見出しAは、セクショニングルートであるbody要素のセクションです。
当然ですが、body要素の前後に他の要素はないため、最上層のセクションです。
続いて、直後にh2要素が出現し、h1要素の下層にサブセクションとして見出しA-1セクション（以下見出しA-1）が始まります。
次のblockqoute要素はセクショニングルートのため、外側のアウトラインに影響を与えない引用文A-1セクションを生成します。
p要素（段落A-1）はヘッディングコンテンツやセクショニングコンテンツではないため、セクションには影響しません。
2つ目のh2要素は、暗黙のセクションの条件である、～前の見出しの階層と同じ、もしくは上の（数字が小さい）見出しが出現した場合～、に該当するため、見出しA-1は終わり新たな見出しA-2セクション（以下見出しA-2）が始まります
しかし、直後にセクショニングコンテンツのsection要素が出現するため、見出しA-2は終了し、新たに見出しA-3セクション（以下見出しA-3）が始まります。
この見出しA-3は、セクショニングコンテンツのセクションのため、最も近いセクショニングルートであるbody要素の見出しAのサブセクションとなります。
見出しA-3は、セクショニングコンテンツの閉じタグと同時に終わります。
そして最後に、p要素（段落A）がありますが、これは見出しAの中の段落となります。
それは他のセクションが存在しないからですが、もし前のsection要素の閉じタグの中に含まれていた場合は見出しA-3の段落と認識されるはずです。
ちょっと煩雑で分かりづらい文章になってしまいましたね。
ここまで書いておいてあれですが、
アウトラインは、言葉で理解するよりも自分でアウトラインの図を書いて考える方が、理解が早いと思います。
もちろん、アウトラインが分からなくてもWeb制作は可能です。
しかし、正しいアウトラインのHTMLはSEO対策として有効な上、Web標準にも適合していると言えます。
参考
この記事は以下の書籍を参考にして書いています。
HTML+CSSデザイン|基本原則、これだけ。【HTML5 & CSS3対応版】
すべての人に知っておいてほしい HTML5 & CSS3 の基本原則
Thanks for reading to the end!!