HTML5では、文書の構造をより明確にするために「セクション」と「アウトライン」という概念が用いられています。
■セクション
セクションとは、章や節、項のように、見出しとそれに関する内容で形成されたひとまとまりの領域を指します。
これまで使われてきたHTMLやXHTMLでは、セクションの領域は見出しであるh1～h6要素を手がかりに推測するしかなく、ほかに明らかに指し示す手段がありませんでした。
また、領域の区切りを「div id=”navi”」「div class=”article”」のようにdiv要素で表すことも多かったため、構造のわかりづらい文書になりがちでした。
●明示的なセクションと暗黙的なセクション
HTML5では、こうした問題を改善するために、セクションを表す要素が新たに定義されました。セクショニング・コンテンツに分類される「section、nav、article、aside」の4つの要素がそれにあたります。これらの要素を使うことで、明示的にセクションを表せるようになります。
しかし、必ずこれらの要素を使って明示的にセクションを表さなければいけないわけではありません。見出しであるh1～h6要素が現れると暗黙的にセクションであるとみなされるため、従来のようにh1～h6要素で(暗黙的に)セクションを表すこともできます。その場合は、そのあとに続く見出しのレベルによって、次のようにセクションの構成が変化します。
・レベルが同じか、高い見出しが続く場合：暗黙的に新しいセクションが開始される
・低いレベルの見出しが続く場合：1つ前のセクションに含まれるサブセクションが開始される
HTML5の仕様書では、各見出しごとにセクショニング・コンテンツに含まれる要素を使って明示的にセクションを示す方法が推奨されています。
■アウトライン
このようにHTML5ではセクション同士の階層関係が厳密に定義されています。
セクションやその見出しから判別されるコンテンツの階層構造を「アウトライン」といいます。
・従来のようにh1～h6要素だけで暗黙的にセクションを表した場合
<body>
<h1>HTML5について</h1>
<p>HTML5とは・・・</p>
<h2>要素</h2>
<p>要素とは・・・</p>
<h3>要素の分類</h3>
<p>要素の分類は・・・</p>
<h2>属性</h2>
<p>属性とは・・・</p>
</body>
・明示的にセクションを表した場合
<body>
<h1>HTML5について</h1>
<p>HTML5とは・・・</p>
<section>
<h2>要素</h2>
<p>要素とは・・・</p>
<section>
<h3>要素の分類</h3>
<p>要素の分類は・・・</p>
</section>
</section>
<section>
<h2>属性</h2>
<p>属性とは・・・</p>
</section>
</body>
■セクションと見出し
セクションとアウトラインという、コンテンツの階層構造を判別する手がかりが用意されたため、セクションの中にh1～h6の見出しを自由に入れても文法的には誤りではなくなりました。
ただし、HTML5の仕様書では、見出しとして次の2つの方法が強く推奨されています。
・h1要素のみを使う
・セクションの入れ子のレヘルに合わせて、適切なランクの見出しを使う
＜見出しにh1要素のみを使った例＞
<body>
<h1>HTML5について</h1>
<p>HTML5とは・・・</p>
<section>
<h1>要素</h1>
<p>要素とは・・・</p>
<section>
<h1>要素の分類</h1>
<p>要素の分類は・・・</p>
</section>
</section>
<section>
<h1>属性</h1>
<p>属性とは・・・</p>
</section>
</body>
■セクショニング・ルート
blockquote、body、details、fieldset、figure、tdといった要素は、セクショニンク・ルートというカテゴリーに属しています。
セクショニング・ルートに属する要素は、その中に独自のセクション(アウトライン)を持つことができる要素です。
そのセクションは独立したコンテンツとみなされ、前後のコンテンツのアウトラインには影響しません。