HTML5以前は主にH要素によってアウトラインが解釈されていました。
<html>
<body>
<!-- アウトライン1 -->
<h1>大見出し</h1>
<p>文章</p>
<!-- アウトライン2 -->
<h2>中見出し</h2>
<p>文章</p>
<!-- アウトライン3 -->
<h3>小見出し</h3>
<p>文章</p>
<!-- /アウトライン3 -->
<!-- /アウトライン2 -->
<!-- /アウトライン1 -->
</body>
</html>
大見出し
L中見出し
L小見出し
セクショナブル要素によってコーダーが明示的にアウトラインをさ指定できるのでHTML5.0ではセクショニング要素によって明示的にセクショニングがなされれば以下の様にすべてH１でのマークアップが可能になりました。
<html>
<body>
<!-- アウトライン1 -->
<h1>大見出し</h1>
<p>文章</p>
<section>
<!-- アウトライン2 -->
<h1>中見出し</h1>
<p>文章</p>
<section>
<!-- アウトライン3 -->
<h1>小見出し</h1>
<p>文章</p>
<!-- /アウトライン3 -->
</section>
<!-- /アウトライン2 -->
</section>
<!-- /アウトライン1 -->
</body>
</html>
しかし、HTML5.1以降は上のようなマークアップは推奨されず、アウトラインに従ったHeading要素でのマークアップになりました。
<html>
<body>
<!-- アウトライン1 -->
<h1>大見出し</h1>
<p>文章</p>
<section>
<!-- アウトライン2 -->
<h2>中見出し</h2>
<p>文章</p>
<section>
<!-- アウトライン3 -->
<h3>小見出し</h3>
<p>文章</p>
<!-- /アウトライン3 -->
</section>
<!-- /アウトライン2 -->
</section>
<!-- /アウトライン1 -->
</body>
</html>
セクショナブル要素は以下の要素です
- body
- nav
- article
- section
- aside
- header
- footer
見出しがあればアウトラインができ、アウトラインがあれば基本的に見出しがあるのが基本です。
よくある間違い１（セクションに見出しがないよ？）
<!-- 誤 -->
<h1>見出し</h1>
<section>
<p>文章文章</p>
</section>
よくある間違い２（セクショニング要素の無駄な入れ子）
body要素はセクショニング要素です
誤
<!-- 誤 -->
<body>
<article>
<h1>見出し</h1>
<p>文章文章</p>
</article>
</body>
と、言うのが私のHTML5の大体の認識でした。
が、
nav要素もセクショニング要素ですが、厳格にアウトラインを意識すれば見出しを付ける必要があるとおもいますが、いちいち見出しを用意できない場合もあると思います。また、header要素もセクショニング要素ですが、扱いが微妙なケースがあります。
それでHTML5.2の仕様についてちょっと調べていたのですが、例として出てくるマークアップが、アウトライン構造が微妙なものが数多く出ていました。
いよいよ、私は、
「HTML何もわからない」状態になりました。
そういう時に見るべきは公式ドキュメントです。
公式のドキュメントはこちらです。
There are currently no known native implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers and browser extensions. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors should use heading rank (h1-h6) to convey document structure.
https://www.w3.org/TR/html52/sections.html#headings-and-sections
要するに、
「アウトラインのアルゴリズムはこれといって決まってるものはないからあまり信用できんのだよ。だからセクショニング要素に頼らず、アウトライン構造はH要素で作ってね！」
ということだろうか？
なんじゃそりゃ！
まあ、アウトライン？ナニソレオイシイノ？状態でマークアップするよりも、ここまで知った上でアークアップしたほうが良いマークアップになることは確かなようです。