HTML5タグリファレンス
見出しとセクション

投稿 | | カテゴリー タグリファレンス, HTML5

<h1> ~ <h6>要素は、文書またはセクションの見出しを表します。
HTML5で新しく追加された<article><section><aside><nav>は、その範囲がひとつのセクション(章・節・項)であることを示しています。
セクションにある最初の見出し要素はそのセクションの見出しであることを表します。最初の見出しと等しいかより高いランクの以降の見出しは、新しいセクションの始まりを意味します。より低いランクの見出しはサブセクションを表します。

<body>
<h1>第一章</h1>
<p>第一章の内容</p>

<h1>第二章</h1>
<p>第二章の内容</p>
<h2>第二章の第一節</h2>
<p>第二章の第一節の付録</p>
</body>

例えば、上のような構造は暗黙的に下のように解釈されます。

<body>
<section>
<h1>第一章</h1>
<p>第一章の内容</p>
</section>

<section>
<h1>第二章</h1>
<p>第二章の内容</p>
  <section>
<h2>第二章の第一節</h2>
<p>第二章の第一節の付録</p>
  </section>
</section>
</body>

どちらのマークアップも構造的な意味合いは等しいと言えますが、明示的にセクションを指定するのが推奨されています。便宜上、あるいはスタイリングを行いやすいという点でも後者の方が好ましいでしょう。

<h1> ~ <h6>要素は、新しいセクションまたはサブセクションのための見出しであることを目的としない限り、小見出しや他のタイトル、謳い文句などには使用してはいけません。
そういった場合には汎用的なタグと慣例的な手法を用いてください。
参考:専用の要素がない場合のマークアップ例 Common idioms without dedicated elements