見出しタグやsection要素の正しい使い分け

HTMLで文章構造を表現する際、見出しタグ（h1〜h6） と section要素 の使い分けはとても重要です。
これらを正しく使うことで、検索エンジンやスクリーンリーダーにとって理解しやすいページになり、結果としてSEOやアクセシビリティの向上につながります。

本記事では、見出しタグとsection要素の基本的な役割から、実践的な使い分け方までを丁寧に解説します。

見出しタグ（h1〜h6）の基本的な役割

見出しタグは、文章の階層構造を示すための要素です。
数字が小さいほど上位の見出し、大きいほど下位の見出しを表します。

h1〜h6の役割の違い

• h1：ページ全体の主題を表す最上位の見出し
• h2：h1の内容を分割する大きな章
• h3：h2をさらに細かく分けた節
• h4〜h6：補足や詳細説明用の下位見出し

見た目の大きさを調整するために使うのではなく、意味的な階層を表すために使うことが重要です。

※ 見出しタグの基本構造については、
「HTMLの見出しタグ（h1〜h6）の正しい使い方」で詳しく解説しています。

section要素とは何か

section要素は、意味のあるコンテンツのまとまりを示すための要素です。
単なる装飾用の囲みではなく、「この部分は1つの話題である」と示す役割があります。

section要素の特徴

• 1つのテーマ・話題をまとめるために使う
• 原則として、見出しを伴う
• ページ内に複数配置できる

section要素は、文章構造を明確にするための「枠」と考えると理解しやすくなります。

見出しタグとsection要素の関係

見出しタグとsection要素は、役割が異なる要素です。

基本的な考え方

• section：内容のまとまりを作る
• 見出しタグ：そのまとまりのタイトルを付ける

つまり、sectionの中に見出しタグが配置されるのが基本形です。

正しい使い分けの基本ルール

1. 見出しだけで十分な場合

単純に文章を章立てしたいだけであれば、見出しタグのみで構成して問題ありません。

<h2>見出しA</h2>
<p>本文</p>

<h2>見出しB</h2>
<p>本文</p>

2. 意味のあるまとまりを示したい場合

1つの話題として明確に区切りたい場合は、section要素を使います。

<section>
  <h2>見出しA</h2>
  <p>本文</p>
</section>

このようにすることで、「この範囲は1つのセクションである」と明示できます。

よくある誤解と注意点

sectionは見た目調整のための要素ではない

section要素は、レイアウト目的で使うものではありません。
単なるデザイン調整には、div要素を使用します。

見出しの階層を飛ばさない

h2の次にいきなりh4を使うなど、階層を飛ばす使い方は避けます。
文章構造が分かりにくくなり、アクセシビリティ上も好ましくありません。

sectionを使うべきか迷ったときの判断基準

以下の問いで判断すると分かりやすくなります。

• この内容は1つのテーマとして独立しているか
• 見出しを付けて説明できる内容か

どちらも「はい」であれば、section要素を使うのが適切です。

まとめ

• 見出しタグは「階層構造」を表す
• section要素は「意味のあるまとまり」を表す
• sectionの中には原則として見出しを配置する
• 見た目ではなく、意味と構造を基準に判断する

これらを意識することで、HTMLの構造は格段に分かりやすくなります。

関連記事

• セマンティックHTMLの考え方と基本要素
• section要素とarticle要素の違い
• header要素と見出しタグの役割
• HTMLの基本構造とタグの使い分け