1.

HTML h1～h6 見出し要素完全ガイド (SEO/アクセシビリティ)

▶
編集
この記事の要点
  • h1～h6 = HTML の見出し要素。h1 が最も重要、h6 が最も細かい
  • 1 ページに h1 は基本 1 つ、h2 以降で本文構造を作る。階層をスキップしないのが基本
  • SEO 重要度大: 検索エンジンが見出しでコンテンツのテーマを理解。タイトルキーワードを h1 に含めるのが定石
  • アクセシビリティ: スクリーンリーダーは見出しでナビゲートする (h キーでジャンプ)
  • 代替: 装飾理由で見出しに見せたい場合は role="heading" aria-level="2" も使えるが、素直に h2 を使うべき

h1～h6 とは

HTML には見出しを表す <h1> から <h6> の 6 段階のタグがあります。HTML 4 時代から存在し、現代の HTML5 でも中核的なセマンティック要素です。

<h1>記事のタイトル</h1>           <!-- ページ全体の主題 -->
<h2>大見出し</h2>                <!-- セクションの見出し -->
<h3>中見出し</h3>                <!-- サブセクション -->
<h4>小見出し</h4>                <!-- さらに細かく -->
<h5>さらに小見出し</h5>           <!-- ほぼ使われない -->
<h6>最小の見出し</h6>             <!-- ほぼ使われない -->

正しいアウトライン構造

見出しは階層構造を作るためのものです。「文字を大きくしたいから h2 を使う」のは間違いで、論理構造に合わせて使います。

<!-- ✅ 正しい階層 -->
<h1>HTML 完全ガイド</h1>
  <h2>基本構造</h2>
    <h3>DOCTYPE 宣言</h3>
    <h3>html / head / body 要素</h3>
  <h2>テキスト要素</h2>
    <h3>段落</h3>
    <h3>見出し</h3>
      <h4>h1～h6 の使い分け</h4>
  <h2>リンクと画像</h2>

<!-- ❌ よくある間違い: 階層スキップ -->
<h1>タイトル</h1>
<h3>いきなり h3</h3>     <!-- h2 を飛ばすのは NG -->

<!-- ❌ 装飾目的の見出し -->
<h2 style="font-size:12px">小さく見せたい注釈</h2>
<!-- → これは <p class="caption"> を使うべき -->

1 ページに h1 は何個？

従来 (HTML 4 時代) は1 ページに h1 は 1 つが原則でした。HTML5 では <section> や <article> ごとに h1 を持ってよいという セクショニング コンテンツ の概念が導入されましたが、ブラウザの実装が追従しなかったため、現在も「h1 はページに 1 つ」が事実上のベストプラクティスです。

  • Google も「ページ内で複数 h1 は問題ない」と公言していますが、SEO 上は h1 が 1 つの方が明確
  • Lighthouse / SEO 監査ツールも 1 ページ 1 h1 を推奨
  • article が複数並ぶブログ一覧ページなどでは、各 article に h2 を使うのが無難

セクショニング要素との関係

HTML5 で導入されたセクショニング要素と組み合わせて使います:

要素意味典型的な中身
<header>ページ/セクションのヘッダh1 とロゴ / ナビ
<main>主要コンテンツh1 とメイン本文 (1 ページ 1 個)
<article>独立した記事記事タイトルの h1/h2
<section>テーマごとのセクションh2 とその段落
<nav>ナビゲーションリンク一覧
<aside>本文と独立した補足サイドバー
<footer>ページ/セクション フッタコピーライト等
 
<body>
  <header>
    <nav><!-- グローバルナビ --></nav>
  </header>
  <main>
    <article>
      <h1>記事タイトル</h1>
      <section>
        <h2>セクション1</h2>
        <p>本文</p>
        <h3>細目</h3>
      </section>
      <section>
        <h2>セクション2</h2>
      </section>
    </article>
    <aside>
      <h2>関連記事</h2>
    </aside>
  </main>
  <footer>
    <p>© 2026 Example</p>
  </footer>
</body>

SEO 観点での見出し

  • 検索エンジンは見出しでテーマを理解。h1 はタイトルタグと並んで最重要
  • キーワードを自然に含める。「h1 で詰め込む」は逆効果 (キーワードスタッフィング扱い)
  • h2 は目次的に使う。記事全体の構成を見出しだけで読めるように
  • 段落の冒頭で見出しを使い、その下に対応する本文を置く
  • Google の品質評価ガイドラインでも「見出しが内容を正確に表しているか」が見られる

CSS でのデザイン

見出しはセマンティクスを保ったままデザインを変えるのが原則です。

/* ブラウザのデフォルト (Chrome 系) */
h1 { font-size: 2em;    margin: 0.67em 0; font-weight: bold; }
h2 { font-size: 1.5em;  margin: 0.83em 0; font-weight: bold; }
h3 { font-size: 1.17em; margin: 1em 0;    font-weight: bold; }
h4 { font-size: 1em;    margin: 1.33em 0; font-weight: bold; }
h5 { font-size: 0.83em; margin: 1.67em 0; font-weight: bold; }
h6 { font-size: 0.67em; margin: 2.33em 0; font-weight: bold; }

/* カスタムデザイン */
h1 {
  font-size: 2.5rem;
  border-bottom: 3px solid #2563eb;
  padding-bottom: 0.3em;
  color: #1e293b;
}
h2 {
  font-size: 2rem;
  border-left: 5px solid #2563eb;
  padding-left: 0.5em;
  margin-top: 2em;
}
h3 {
  font-size: 1.5rem;
  color: #475569;
}

アクセシビリティ

スクリーンリーダー (NVDA、JAWS、VoiceOver) のユーザーは、見出しを使ってページをナビゲートします:

  • NVDA / JAWS: h キーで次の見出しへジャンプ、1～6 でレベル別ジャンプ
  • VoiceOver: ローター機能で見出し一覧表示
  • 論理階層が崩れていると、ユーザーが文脈を見失う

WAI-ARIA で見出し相当を作る (代替)

<!-- ✅ 推奨: 素直に h2 を使う -->
<h2>セクション見出し</h2>

<!-- 代替: ARIA で見出し相当に (基本的に非推奨、最終手段) -->
<div role="heading" aria-level="2">セクション見出し</div>

<!-- 必要な場面例: 既存 CMS で h タグが使えない等 -->

Lighthouse / axe-core の警告

警告意味対処
Heading elements are not in a sequentially-descending orderh1 → h3 など階層スキップh2 を挟む
Document does not have a <h1> headingh1 が無いh1 を追加
Empty heading見出しの中身が空内容を入れる、または削除
Multiple h1h1 が複数1 つにする (article 内除く)

見出しナビゲーション (目次作成)

// h2/h3 から目次を自動生成
const toc = document.createElement('nav');
toc.innerHTML = '<h2>目次</h2>';
const ul = document.createElement('ul');

document.querySelectorAll('main h2, main h3').forEach((h, i) => {
  const id = `heading-${i}`;
  h.id = id;
  const li = document.createElement('li');
  li.style.marginLeft = h.tagName === 'H3' ? '1em' : '0';
  li.innerHTML = `<a href="#${id}">${h.textContent}</a>`;
  ul.appendChild(li);
});
toc.appendChild(ul);
document.querySelector('main').prepend(toc);

よくあるアンチパターン

NG理由正解
装飾目的で h2 使用論理構造を壊す<p class="subtitle"> + CSS
1 ページ 5 個の h1SEO で意図が散るh1 は 1 つ、他は h2
h1 → h4 と飛ばすスクリーンリーダー混乱h2, h3 を挟む
h2 を空にする意味なし、警告削除 or 内容を入れる
h6 で本文の強調使用目的が違う<strong>

FAQ

Q: ブログ記事のタイトルとサイト名、どちらが h1？
A: 記事タイトルが h1。サイト名は記事ページでは <p> や <div> でロゴ表示にしておくのが定石。トップページではサイト名を h1 にして OK。

Q: section 内で h1 を使ってよい？
A: HTML5 仕様では OK ですが、実際の検索エンジン / 支援技術の実装が追従していないので使わない方が無難。各 section は h2 から始めるのが現実的なベストプラクティスです。

Q: h7, h8 は無い？
A: HTML 標準には h6 までしかありません。それより細かい階層が必要な場合は、コンテンツの構造を見直して階層を浅くすべきです。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. h1～h6要素
  2. p要素
  3. blockquote要素
  4. q要素
  5. cite要素
  6. ins要素
  7. del要素
  8. HTML em 要素（強調）の使い方と strong との違い
  9. br要素
  10. abbr要素
  11. dfn要素
  12. pre要素で整形済みテキストを表示する
  13. code要素
  14. samp要素
  15. kbd要素
  16. var要素
  17. bdo要素
  18. sup要素で上付き文字を表示する
  19. sub要素
  20. mark要素
  21. data要素
  22. time要素
  23. wbr要素
  24. bdi要素
2026-06-11 07:29:05 atom 258

人気ページ

最近更新/作成されたページ