HTMLの見出し構造（h1〜h6）｜正しい階層とやってはいけない書き方

HTMLの見出し構造（h1〜h6）｜正しい階層とやってはいけない書き方 HTML

HTMLの見出し構造とは

見出し要素 h1〜h6 は、文書の章立てを表すタグです。数字は見た目の大きさではなく「階層の深さ」を表します。スクリーンリーダーの利用者は見出しだけを順に読み上げて内容を探すことが多く、見出しの階層が正しいほど目的の箇所へたどり着きやすくなります。

MDN は、1ページに h1 を1つ置き、h1 → h2 → h3 のように順に深くすることを推奨しています。ここでは見出し構造の基本ルールと、実務で起きやすい崩れ方を整理します。

基本（構文・仕組み）

階層の考え方は、本の目次と同じです。

h1  ページ全体の主題
  h2  大きな章
    h3  その章の中の節
    h3
  h2  次の章
    h3
      h4  さらに細かい項目

守りたいルールは3つです。

  1. h1 は1ページに1つ。title 要素と近い内容で、ページの主題を表す。
  2. 階層は飛ばさない（h2 の次に h4 を置かない）。深い階層から浅い階層へ戻るのは問題ありません（h3 の後に h2 は可）。
  3. 大きさや太さはCSSで決める。小さく見せたいから h5 を使う、は誤りです。

なお、section の中で h1 を入れ子にしてもブラウザが自動で階層を下げる「アウトラインアルゴリズム」は、どのブラウザにも実装されていません（MDN の記載）。そのため、1ページに複数の h1 を置く書き方は避けます。

サンプルコード（実行結果つき）

良い例です。

<h1>HTMLの教科書</h1>
<h2>基礎</h2>
<h3>タグ</h3>
<h3>属性</h3>
<h2>応用</h2>
<h3>フォーム</h3>
<h4>input</h4>

悪い例です。h2 を飛ばして h4 に進み、さらに見た目のために h5 を使っています。

<!-- 悪い例 -->
<h1>HTMLの教科書</h1>
<h4>基礎</h4>
<h5 class="lead">リード文のつもり</h5>

見た目を変えたいときは、レベルを変えずにCSSを使います。

.sub-title { font-size: 1rem; font-weight: 400; }

階層の飛びを調べる簡易スクリプトです。

const hs = [...document.querySelectorAll("h1,h2,h3,h4,h5,h6")];
let prev = 0, bad = [];
hs.forEach(h => {
  const level = +h.tagName[1];
  if (level > prev + 1) bad.push(h.textContent);
  prev = level;
});
console.log("h1数:", document.querySelectorAll("h1").length, "飛び:", bad.length);

動作確認（検証環境と結果）

  • 環境: Windows 11、headless Microsoft Edge 154.0.4258.53（Chromium系）（render.ps1 で描画）。
  • 確認内容: 「良い例」のHTMLに上記スクリプトを組み込み、JS実行後のDOMに結果を書き出して確認。
  • 結果: 「良い例」は h1数:1 飛び:0 と出力されました。「悪い例」に同じスクリプトを実行すると h1数:1 飛び:1（飛びとして検出されたのは h4 の「基礎」）でした。h4 の次の h5 は1段だけ深いため、このスクリプトでは検出されません。見た目目的で選んだ見出しかどうかは、目視で確認します。
  • ログ: C:Tempks2techtestshtml-heading-structure.md。

HTMLの見出し構造の注意点

  • ロゴを h1 にするかは設計次第ですが、トップページ以外では、ロゴではなくそのページの主題を h1 にするのが無難です。
  • hgroup は見出しと補足の組み合わせに使えますが、階層は中身の見出しが決めます。
  • summary の中に見出しを入れると、ブラウザにより見出しの役割が失われる場合があります（MDN）。使う場合は実機で確認します。
  • 装飾のために見出しの中へ画像だけを入れるときは、alt で見出し文言を伝えます。

HTMLの見出し構造でよくあるミス

  • サイドバーのウィジェットのタイトルを、すべて h2 や h1 にしてしまう。
  • 文字を大きくしたくて h1 を本文の途中に使う。
  • 見出しにしたい文言を p や strong で作り、階層が無くなっている。
  • CMSのテンプレートで、記事タイトルとサイトタイトルの両方が h1 になっている。
  • 空の見出し（<h2></h2>）が残っている。

ブラウザ対応・バージョン

見出し要素はすべてのブラウザで長年サポートされています。アウトラインアルゴリズムは前述のとおり未実装なので、特定のバージョンを気にする必要はありません。既定のフォントサイズやマージンはブラウザ間でわずかに違うため、MDN は h1 の見た目を揃えたいときに font-size と margin-block を明示する例を示しています。

HTMLの見出し構造のチェックリスト

  • [ ] h1 がページに1つだけ。
  • [ ] 階層が飛んでいない。
  • [ ] 見出しを抜き出すと、目次として意味が通じる。
  • [ ] 大きさの調整はCSSで行っている。
  • [ ] 空の見出し、見出しの見た目だけの p が無い。

HTMLの見出し構造のFAQ（よくある質問）

Q. h1 が複数あるとSEOで不利ですか。
A. 公式に不利と断定できる情報は確認していませんが、アウトラインが機能しないため、アクセシビリティ上も保守上も1つに絞るのが安全です。

Q. 目次リストの「目次」は見出しにすべきですか。
A. 文書の構成上の見出しであれば h2 など、ナビゲーションなら nav に aria-label を付ける方法もあります。

Q. 見出しを飛ばさないと、デザイン上は大きすぎます。
A. 階層は守り、CSSでサイズを調整してください。

筆者の見解（HTMLの見出し構造）

見出しは、完成したページから見出しタグだけを抜き出して読み、目次として成り立つかを確認する方法が最も確実だと考えます。デザイナーのラフに合わせて見出しレベルを選びがちですが、レベルは文書構造、大きさはCSS、と役割を分けるだけで多くの崩れは防げます。CMS運用では、記事本文の中に editor が入れる見出しが h2 から始まるようテンプレート側で決めておくのが実務的です。

HTMLの見出し構造の関連項目

出典（一次情報）

タイトルとURLをコピーしました