見出し要素(h1、h2、h3、h4、h5、h6要素)とセクション

h1-h6要素は見出しを表します。

セクショニング・コンテンツの要素のセクションで、最初の要素がヘッディング・コンテンツである場合は、そのセクションの見出しを表します。

なお、見出し要素が新しいセクションやサブセクションの見出しであることを意図していない限り、小見出し、サブタイトル、代替のタイトルや、キャッチフレーズやスローガンなどのタグラインをマークアップするために使用することはできません。


見出しを持つセクションで、同等以上のランクの見出しが後に続く場合は、新しい(暗黙の)セクションを開始し、低いランクの見出しが続く場合は前のセクションの一部として暗黙のサブセクションを開始します。

このように、1つまたはそれ以上の潜在的にネストされたセクションのリストによる階層構造と区切りをアウトラインと言います。

例1)

<body>
<h1>AAA</h1>

<h2>BBB</h2>
<blockquote>
<h3>CCC</h3>
</blockquote>
<p>DDD</p>

<h2>EEE</h2>

<section>
<h3>FFF</h3>
</section>

<p>GGG</p>
</body>

上記のHTMLドキュメント


※上記の例では、最後の段落のコンテンツ(GGG)の見出しがトップレベル(AAA)であることに注目して下さい。これは、FFFのsection要素が、以前の暗黙のセクションを終了しているためです。

セクションは、どのランクの見出しをも含むことができますが、セクションのネスティングレベルに適したランクの見出しを使用することが強く奨励されています。

また、セクショニング・コンテンツの1つの要素に複数の見出し要素を持つことにより生成される暗黙のセクションではなく、セクショニング・コンテンツの要素でそれぞれのセクションを明示的にラップすることが推奨されています。

例2)

<body>
<h1>h1要素</h1>
<p>内容</p>

<section>
<h2>h2要素</h2>
<p>内容1</p>
<p>内容2</p>

<section>
<h3>h3要素</h3>
<p>内容a</p>
<p>内容b</p>
<section>
</section>

<section>
<h2>h2要素</h2>
<p>内容3</p>
<p>内容4</p>
</section>
</body>

上記のHTMLドキュメント


例3)

<body>
<h1>h1要素</h1>
<p>内容</p>

<section>
<h1>h1要素</h1>
<p>内容1</p>
<p>内容2</p>

<section>
<h1>h1要素</h1>
<p>内容a</p>
<p>内容b</p>
</section>
</section>

<section>
<h1>h1要素</h1>
<p>内容3</p>
<p>内容4</p>
</section>
</body>

上記のHTMLドキュメント

例3は、例2と意味的に同じであり、メンテナンス(編集のときにセクションの入れ替えなど移動させることがある場合など) が簡単な場合があります。

ただし、例3のようなアウトライン・アルゴリズムは、適合性チェッカーなどの他のソフトウェアなどには実装されていますが、グラフィカル・ブラウザやアシスティブ・テクノロジーのユーザー・エージェントでの実装はまだなく、ユーザにドキュメントの構造を伝えるために当てにすることはできません。

したがって、ドキュメントの構造を伝えるためには、見出し要素のランク(h1-h6)を使用することが推奨されています。

お役立ち資料のリンク:Google公式 検索エンジン最適化スターターガイド