h3タグとは?見出し階層の正しい使い方とSEO・アクセシビリティ

h3タグとは?見出し階層の正しい使い方とSEO・アクセシビリティ

h3タグの概要と役割

<h3>はHTMLの見出し要素で、文書構造の3階層目を表します。h2の下位トピックを整理し、内容を小さなまとまりに分けるのが目的です。装飾目的で大きな文字を出すためのタグではなく、意味づけ(セマンティクス)を与えるための要素です。

h3タグとは?(意味としくみ)

見出し要素はh1〜h6まであり、ページの主題をh1、その配下をh2、さらに細分化したトピックをh3で示します。h3が連続する場合は、同じ階層の小見出しが並んでいることを意味します。テキストを大きく見せたいだけなら、見出しではなくCSSでサイズを調整します。

実務での論点(よくある間違いと正しい運用)

見出しはページ構造と読み上げ順序に直結するため、適切に使うほど可読性とアクセシビリティが向上します。以下のポイントを意識すると運用が安定します。

  • 飛び級禁止:h2の直下にh4を置かず、階層を一段ずつ下げる
  • 見た目と意味を分離:サイズや色はCSS、構造は見出しで表す
  • 見出しは簡潔に:要点を短い名詞句で。装飾語を詰め込みすぎない
  • セクションのまとまり:h3の下に2〜4段落程度を置くと読みやすい

見出し階層の使い分け

見出しレベルの目安
要素役割注意点
h1ページの主題(1ページ1回)本文では出力しないテーマもある
h2大きな章の区切りH1と重複しない見出しにする
h3章の中の小見出し飛び級せず、段落を十分に置く

SEOやアクセシビリティの観点

検索エンジンは見出しを理解の手がかりにしますが、見出しそのものが直接の順位決定要因になるわけではありません。重要なのは、論理的な階層と簡潔な見出し文です。スクリーンリーダー利用者にとっても、見出し構造が整っていると情報を探しやすくなります。

よくある質問(FAQ)

h3の前に必ずh2が必要ですか?

はい。セクション階層を崩さないため、h2の下位としてh3を配置します。飛び級は避けましょう。

見出しを強調表示の目的で使ってもよいですか?

おすすめしません。強調はCSSや装飾で行い、見出しは文書構造を表すために使います。

見出しの文はどのくらいの長さがよいですか?

短い名詞句が基本です。検索意図に合わせて重要語を含めつつ、冗長な装飾語は避けましょう。

h3タグのまとめ

h3は章内の小見出しとして、内容を整理し読みやすさを高めます。飛び級を避け、段落を十分に配置し、見出し文は簡潔に。見た目の調整はCSSに任せ、文書構造を正しく表現することが結果的にSEOとアクセシビリティの両方に寄与します。

関連記事
SEOに関連する10種類のHTMLの書き方|SEO対策との関係性は?
SEOに関連する10種類のHTMLの書き方!SEO対策との関係性は?
SEO対策に取り組むとき、「HTMLは専門知識が必要で難しそう」と感じてしまう方も多いのではないでしょうか。 確かにHTMLはページの骨組みをつくる言語であり、タグの選び方や使い方を誤るとレイアウト崩れなどの不具合につな…