見出しタグ（h2・h3）の正しい使い方｜HTML構造とSEOの基本を理解する

Webサイトやブログ記事において、見出しタグ（h2・h3）は文章構造を整理し、読みやすさやSEOに大きく影響する重要な要素です。
しかし、見た目だけを意識して使われてしまい、正しい構造になっていないケースも少なくありません。

この記事では、見出しタグ（h2・h3）の役割と正しい使い方を基礎から解説し、実務で迷わず使える状態を目指します。

見出しタグ（h2・h3）とは何か

見出しタグとは、HTMLで文章構造を示すためのタグです。
h1からh6まで存在し、数字が小さいほど上位の見出しを表します。

• h1：ページ全体の主題
• h2：章レベルの見出し
• h3：h2の補足・詳細

このように、見出しタグは階層構造を表現するためのものです。

HTMLの基本構造については、以下の記事で詳しく解説しています。
▶ HTMLの基本構造とタグの役割

h2タグの役割と正しい使い方

h2は「話題の切り替え」を示す見出し

h2タグは、記事の中で大きな話題が切り替わるポイントに使用します。
1つの記事の中で、章立てをするイメージです。

h2の基本ルール

• h1の次に使う
• 記事全体の流れを分割する
• 並列関係の内容に使う

h2の使用例

<h2>見出しタグの役割</h2>
<h2>h2とh3の違い</h2>
<h2>よくある間違い</h2>

このように、同じ重要度の話題をh2で並べるのが基本です。

h3タグの役割と正しい使い方

h3は「h2の内容を深掘りする見出し」

h3タグは、直前のh2を補足・分解するために使用します。
単独で使うのではなく、必ずh2の配下に置くことが前提です。

h3の基本ルール

• h2の中を整理する目的で使う
• h2がない状態で使わない
• 詳細説明・注意点・具体例に向いている

h3の使用例

<h2>h2タグの使い方</h2>
  <h3>話題を区切る役割</h3>
  <h3>SEOとの関係</h3>

このように、h3はh2の「子要素」として機能します。

見出しタグの正しい階層構造

見出しタグは、順番を飛ばさないことが重要です。

正しい例

<h1>記事タイトル</h1>
<h2>大見出し</h2>
<h3>小見出し</h3>
<h2>次の大見出し</h2>

誤った例

<h1>記事タイトル</h1>
<h3>いきなりh3</h3>
<h2>後からh2</h2>

階層が崩れると、検索エンジンにも読者にも内容が伝わりにくくなります。

HTMLの階層構造については、以下の記事も参考になります。
▶ HTMLで文書構造を正しく作る方法

見出しタグとSEOの関係

見出しは検索エンジンに内容を伝える目印

検索エンジンは、見出しタグを使ってページ構造を理解します。
そのため、見出しにページ内容を適切に表す言葉を使うことが重要です。

SEOを意識した見出しのポイント

• 内容と一致した文言にする
• キーワードを自然に含める
• 無理に詰め込まない

SEOの基礎については、以下の記事で詳しく解説しています。
▶ SEOに強いHTML構造の基本

よくある見出しタグの間違い

デザイン目的で使ってしまう

見た目を大きくしたいという理由だけでh2やh3を使うのは誤りです。
デザインはCSSで調整し、構造はHTMLで表現します。

CSSとHTMLの役割分担については、以下の記事が参考になります。
▶ HTMLとCSSの役割の違い

見出し文が抽象的すぎる

「ポイント」「まとめ」など内容が分からない見出しは避け、
何について書かれているかが分かる表現を心がけます。

まとめ｜h2・h3は「文章の設計図」

見出しタグ（h2・h3）は、文章を整理し、読みやすく伝えるための設計図です。

• h2は話題の区切り
• h3はh2の補足説明
• 階層構造を崩さない
• 見た目ではなく意味で使う

これらを意識することで、読みやすく、検索エンジンにも評価されやすい記事構造になります。
Web制作やブログ運営の基礎として、正しい見出しタグの使い方を身につけておくことが大切です。