見出しタグ（h1〜h6）の正しい使い方

見出しタグ（h1〜h6）とは何ですか？

見出しタグ h1〜h6 は、文書の階層構造（アウトライン）を HTML で表す要素です。人間には大きな太字として見えますが、本当の役割は「どこが章でどこが節か」を検索エンジンとスクリーンリーダーに伝えることです。見た目を大きくするための道具ではなく、文書の骨組みを示すための道具だと考えると、正しい使い方が見えてきます。

見出しは、記事にとっての目次であり骨組みです。本を開いたとき、章タイトルと節タイトルの入れ子を見れば全体像がつかめるのと同じで、 Web ページの h1〜h6 も「この文書はどんな塊でできているか」を表します。見える人は文字の大きさで章と節を無意識に区別しますが、 その階層関係を機械が読める形で明示するのが見出しタグの仕事です。

h1 は 1 ページに 1 つだけですか？

実務上は 1 ページに 1 つを推奨します。HTML5 の仕様では section ごとに h1 を複数置くことも許されていますが、その「アウトラインアルゴリズム」をブラウザや支援技術がまともに実装しなかった経緯があり、複数 h1 は解釈が安定しません。ページの主題を表す h1 を 1 つだけ置き、以降は h2 以下で構成するのが最も無難です。

歴史的な補足をしておきます。HTML5 には当初、<section> ごとに h1 を置いても、入れ子の深さから見出しレベルを自動計算する 「アウトラインアルゴリズム」という構想がありました。仕様上はこれで複数 h1 が正当化されます。 しかしそのアルゴリズムを実装したブラウザや支援技術は結局ほとんど存在せず、現在の W3C/WHATWG のガイダンスも 「実務では文書に 1 つの h1 を使い、以降は h2 以下で階層を作る」ことを勧めています。

見出しのレベルを飛ばしてはいけないのはなぜですか？

レベルは順番に下げ、飛ばさないことが原則だからです。h2 の次にいきなり h4 を置くと、スクリーンリーダーの利用者は「h3 が抜けている＝何か見落としたか」と迷います。見出しは文書の目次であり、番号が 1・2・4 と飛ぶ目次が読みにくいのと同じです。深い階層が必要なら、上のレベルから順に h2→h3→h4 と積み上げます。

スクリーンリーダーには、見出しだけを一覧して移動する機能があります。利用者はページ全体を読まず、見出しのレベル差から文書の構造を頭の中で組み立てます。ここで h2 の次に h4 が来ると、 「本来あるはずの h3 をどこかで読み飛ばしたのだろうか」と不安になります。目次で番号が「1・2・4」と飛んでいたら 読み手が戸惑うのと同じ現象です。レベルは下げるときは 1 段ずつ、上げるときは何段でも戻ってよい、と覚えておくと安全です。

<!-- 正しい: h1 は 1 つ。レベルが順に下がり、章と節の入れ子が文書構造と一致する -->
<h1>コーヒーの淹れ方</h1>

  <h2>道具をそろえる</h2>
    <h3>ドリッパー</h3>
    <h3>ミル</h3>

  <h2>豆を挽く</h2>
    <h3>挽き目の目安</h3>

  <h2>お湯を注ぐ</h2>

<!-- NG1: 見た目のためにレベルを飛ばす（h2 の次が h4） -->
<h2>豆を挽く</h2>
<h4>挽き目の目安</h4>   <!-- h3 が抜けている -->

<!-- NG2: 大きく目立たせたいだけで見出しタグを使う（実際はただの本文） -->
<h3>※ お得なキャンペーン実施中！</h3>

<!-- NG3: div で見出し風。太字に見えても支援技術は見出しと認識しない -->
<div class="title">豆を挽く</div>

見出しは見た目と文書構造のどちらで選ぶべきですか？

見た目の大きさではなく、文書構造の役割で選びます。「ここを少し大きくしたいから h3」という選び方は誤りで、文字サイズは CSS で自由に調整できます。逆に、章の見出しなのに大きく見せたくないからと div にするのも誤りです。タグは意味で決め、大きさや色は CSS で整える、という分業を徹底するのが基本です。

最もありがちな取り違えが、「大きく見せたいから上のレベル」「小さく見せたいから下のレベル」という選び方です。 見出しのレベルは文書の中での位置づけで決まるものであって、文字の大きさで決めるものではありません。 文字サイズ・太さ・色といった見た目は、下のように CSS で後から自由に調整できます。 「同じ章の見出しなのに、ここだけ小さくしたい」と思ったら、タグを下げるのではなく CSS でサイズを下げるのが正解です。

/* 意味は HTML、見た目は CSS で分ける。
   大きさで見出しレベルを選ばない。レベルは文書構造で決め、サイズは CSS で調整する */
h2 { font-size: 1.5rem; }

/* 「大きく見せたくない h2」も、タグは h2 のまま CSS で小さくする。
   逆に本文を目立たせたいだけなら見出しではなく段落に強調スタイルを当てる */
.section-quiet { font-size: 1rem; font-weight: 700; }

この分業ができていると、デザインを変えても文書構造は壊れません。逆に見た目でタグを選ぶ癖がつくと、 リニューアルのたびに見出し階層が崩れ、目次の自動生成やランドマークとの組み合わせも狂っていきます。

見出し構造は SEO とアクセシビリティにどう効きますか？

見出しの適切な階層は、SEO とアクセシビリティの両方に効きます。検索エンジンは見出しからページの主題と構成を読み取り、スクリーンリーダー利用者は見出し間を「ジャンプ」して目的の箇所へ素早く移動します。つまり正しい見出し構造は、機械にも人にも同じ「目次」を提供する行為であり、どちらか一方のためではなく両方に同時に効きます。

見出し構造は、めったに「片方だけ」に効くことがありません。整った階層は、検索エンジンには「このページの主題と、その下位トピック」を伝え、スクリーンリーダー利用者には目的の箇所へ一足飛びに移動する手段を与えます。どちらも本質は同じで、 「文書の目次を、正確に、機械可読な形で提供する」という一つの行為が、SEO とアクセシビリティに同時に跳ね返るのです。

• 検索エンジン — 見出しから主題と構成を把握し、該当箇所を回答やスニペットに使いやすくなる
• スクリーンリーダー — 見出しジャンプで章・節を行き来でき、全文を順に聞かずに済む
• AI 検索 — 見出しを手がかりに「どの段落がどの問いへの答えか」を切り出しやすくなる

見出しでよくある誤りは何ですか？

三大失敗は、装飾目的で見出しタグを使う・見出しを div で作る・順序をめちゃくちゃにする、です。太字にしたいだけで h3 を使うと偽の目次項目が生まれ、逆に div や span で見出し風に飾ると支援技術からは見出しに見えません。h2 の次に h1 が来るような順序の乱れも、アウトラインを壊します。いずれも「見た目」と「意味」を混同したことが原因です。

• 装飾目的で見出しタグを使う — 「目立たせたい一文」を h3 にする。偽の目次項目が増え、構造が水増しされる
• div や span で見出し風に飾る — 太字・大文字で見た目は見出しでも、支援技術と検索エンジンにはただの文字にしか見えない
• 順序がめちゃくちゃ — h2 の次に h1、あるいは h4 から始まる。アウトラインが破綻し、機械が構造を復元できない

三つとも根っこは同じで、「見た目」と「意味」を混同していることが原因です。見出しにすべきかどうかは 「これは文書の章・節の区切りか？」だけで判断し、目立たせたいだけの本文は段落のまま CSS で強調します。

自分のサイトの見出し構造をどう確認しますか？

ブラウザの拡張機能や検証ツールで、見出しだけを抜き出したアウトラインを表示して確認します。h1 が 1 つか、レベルが飛んでいないか、装飾のための見出しが混ざっていないかを目視します。本ツールのアクセシビリティ診断でも見出し構造の乱れを検出しますが、「この見出し文言が内容に合っているか」は機械では判定しきれないため、最後は人が読んで確かめます。

確認は「見出しだけを抜き出したアウトライン」を眺めるのが最短です。ブラウザの拡張機能や検証ツールには、 ページ内の h1〜h6 をレベル付きで一覧表示する機能があります。そこで見るべきは次の 3 点です。

• h1 は 1 つか — 0 個や 2 個以上になっていないか
• レベルが飛んでいないか — h2 の次に h4 のような段抜けが無いか
• 装飾の見出しが混ざっていないか — 本文であるべき文が見出しになっていないか

ただし機械で判定できるのは、ここまでです。「その見出し文言が中身を正しく表しているか」は、人が読んで確かめるしかありません。 タイトルづけの考え方は title タグとも通じるので、あわせて整えると効果的です。