概要
見出し要素とセクショニングコンテンツについて細かい部分を毎回忘れるので記憶定着のためにまとめる。
それとまた忘れても大丈夫なように標準へのリンク集の役割も兼ねて。
「セクショニングコンテンツとセクショニングルートの要素どれがどれだっけ」
「h1ってどこで使って良いんだっけ？」
「h1って一つのHTML文書の中に複数存在してても良いの？」
「h1がないのにh2使って良いの？」
みたいに思ったら読む文章です。
ただし、再確認の趣旨が強いため、わかる人にしかわからない文章になってるかも。
参考
参考にするのはもちろんこちらのHTML5 Living Standard。
英語：HTML Standard - WhatWG
日本語：HTML Standard 日本語訳
ありがたいことに日本語訳をされてる方がいるので利用させていただきます
この記事執筆時点（2020/09/12）で（英語/日本語共に）最終更新日は2020/09/10。
HTML標準に関してはこちらを読むとわかりやすい。
WHATWG HTML日本語訳Wiki - momdo/momdo.github.io Wiki
この記事内では何も注釈が無い場合は、引用元は上記HTML Standard 日本語訳です。
セクションとは何か
見出しとセクション - HTML Standard 日本語訳
HTML文書の中で、見出しとアウトラインを持つ特定の構造的な範囲のことをセクションと呼ぶ。
セクションは特定のタグによって明示的に作成されるか、もしくはそれら特定のタグに囲まれていないヘディングコンテンツによって暗黙的に作成される。
アウトラインとは、そのセクションの中の、階層的な意味を持つ文書構造のこと。
セクションを明示的に作る要素
セクションを明示的に作る要素には、セクショニングコンテンツとセクショニングルートの2種類が存在する。
セクショニングコンテンツ
セクショニングコンテンツ - HTML Standard 日本語訳
articleasidenavsection
セクショニングルート
セクショニングルート - HTML Standard 日本語訳
blockquotebodydetailsdialogfieldsetfiguretd
ここにbodyが含まれていることからも分かる通り、body配下でマークアップされた文書は何もしなくてもそのものが一つのセクションとなる。
Documentのbody要素に対して作成されるアウトラインは、文書全体のアウトラインである。
セクションの特徴
- セクションはセクションをネストして持つことができる。
- セクションの中のセクションは、親セクションのアウトラインの一部となる。
- ただし、セクショニングルートによって作成されたセクションは、親セクションのアウトラインからは切り離され、そこがセクションのルートとなる。
- セクションの特徴は、そのセクションが明示的に作られていても暗黙的に作られていても差分はない。
見出しとは何か
見出しとセクション - HTML Standard 日本語訳
重要なのはセクションで最初に出てくるヘディングコンテンツであるか否か
セクショニングコンテンツの要素においてヘディングコンテンツの最初の要素は、そのセクションの見出しを表す。
**どのヘディングコンテンツをそのセクションの見出しを表す要素として判定するかの基準は「そのセクションにおいて最初に登場するヘディングコンテンツであるか否か」**であり、ヘディングコンテンツのランク（h1〜h6タグの数字）の大小は関係ない。
つまり、セクションの中には上にh1があろうがなかろうが、h2〜h6タグを突然使用することは何ら問題ない。
また、そのセクションよりも上部でh1が使われていようと、そのセクションでh1を使ってはならない理由はない。
h1、h2、h3、h4、h5、h6要素 - HTML Standard 日本語訳
こちらのh1〜h6の説明にも「h1から使わないといけない」という記述はないし、この項の例ではsectionタグの中で最初にh2タグを使用する例が出ている。
また、全セクションでh1タグを使用する例もある（つまり1つのHTML文書の中でh1タグを複数使うことは問題ない）。
ただし例外として、最初のヘディングコンテンツであってもその手前に別のセクションが存在する場合、そのヘディングコンテンツは2番目以降に出てくるヘディングコンテンツとして扱われる。
2番目以降に出てくるヘディングコンテンツ
同等以上のランクに属する後続の見出しは、新しい（暗黙の）セクションを開始し、低いランクの見出しは、前のセクションの一部である暗黙のサブセクションを開始する。
では、2番目以降に出てきたヘディングコンテンツは何を表すかというと、新しいセクションの開始を表す。つまり、これが上記の「暗黙的なセクションの作成」だ。
そしてその場合、ランクによってセクションの構造上の位置が変わる。
その2番目以降に出てきたヘディングコンテンツのランクが、
- 一番近い兄要素のヘディングコンテンツのランク以上である場合
- 兄弟セクション（弟セクション）となる。
- 一番近い兄要素のヘディングコンテンツのランクより小さい場合
- 子セクション（＝サブセクション）となる。
つまり、ヘディングコンテンツのランクは大小の差分だけに意味があり、絶対的な数字には大して意味がない（セクションの構造という意味では。人間が見たときのわかりやすさはまた別の話）。
ややこしいケース
これらのランクとセクションの位置の関係は、ヘディングコンテンツとセクショニングコンテンツが混じるとややこしい。
まず、これは簡単な例：
<body>
<h1>AAA</h1> <!-- [1] -->
<section>
<h1>BBB</h1> <!-- [2] -->
<p>hogehoge</p>
</section>
</body>
まず、bodyがセクションを作る。最初に出てくるヘディングコンテンツが[1]なのでbodyセクションの見出しはAAAだ。
次に、sectionタグがくる。セクショニングコンテンツは問答無用でサブセクションになる。
そのサブセクションの最初のヘディングは[2]なので見出しはBBBだ。
- AAA
- BBB
つまりこう
じゃあこれは？
<body>
<section>
<h1>AAA</h1> <!-- [1] -->
<h1>BBB</h1> <!-- [2] -->
<h2>CCC</h2> <!-- [3] -->
<h1>DDD</h1> <!-- [4] -->
</section>
<h2>EEE</h2> <!-- [5] -->
</body>
結論から書くとこうなる
- untitled（bodyが作るセクション）
- AAA
- BBB
- CCC
- DDD
- EEE
非直感的なのは、sectionタグは一つしかないのに、そのsectionタグの中の記述で結果的にセクションは4つ作られるという点。
また、sectionとh2は同じ階層に並んでいるように見えるのに、実際は兄弟要素ではない点。
AAAは「sectionタグが作るセクション」の見出しで、それ以降の要素（[2], [3], [4]）はその「sectionタグが作るセクション」の配下の要素っぽいのに、「sectionタグが作るセクション」と兄弟要素になる。
[5]に関しては、そのセクションにおける最初のヘディングコンテンツであっても、別のセクションが手前に挟まるとそのセクションの見出しにはならないという点。（さらにここではh1ではなくh2を使っているのでよりややこしい。）
つまりこの文書は下記のマークアップとも構造が等しい
<body>
<section>
<section>
<h1>AAA</h1> <!-- [1] -->
</section>
<section>
<h1>BBB</h1> <!-- [2] -->
<section>
<h2>CCC</h2> <!-- [3] -->
</section>
</section>
<section>
<h1>DDD</h1> <!-- [4] -->
</section>
</section>
<section>
<h2>EEE</h2> <!-- [5] -->
</section>
</body>
この辺の話は、サンプルアウトライン - HTML Standard 日本語訳に色々例が出ているのでここをじっくり眺めながら考えると良い。
人間/botの読みやすさ
人間の読みやすさを意識するなら、この辺の仕様を理解した上で、プロジェクトとしてヘディングコンテンツの使用ルールを決めるのも良いかもしれませんね。
（基本的にユーザーはHTMLタグを意識しながら文章を読むことはないので、開発における保守性の話になると思いますが）
SEO的観点でランクの綺麗さがどこまで見られるのかはGoogleのみぞ知るですが、どんなに人間からの見た目的にランクが綺麗でも、構造が間違ってる方が圧倒的問題なので、どちらかというと構造のルールを理解する方が優先だと思います。
FAQ
「h1ってどこで使って良いんだっけ？」
どこで使っても良いけど、それによって作成されるセクションがどうなるかは前後の要素によって変わります。
「h1って一つのHTML文書の中に複数存在してても良いの？」
HTMLの仕様的には問題なし。
「h1がないのにh2使って良いの？」
HTMLの仕様的には問題なし。