タイトル: h1～h6要素
SEOタイトル: HTML h1～h6 見出し要素完全ガイド (SEO/アクセシビリティ)
| この記事の要点 |
|
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 order | h1 → h3 など階層スキップ | h2 を挟む |
Document does not have a heading | h1 が無い | h1 を追加 |
| Empty heading | 見出しの中身が空 | 内容を入れる、または削除 |
| Multiple h1 | h1 が複数 | 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 個の h1 | SEO で意図が散る | 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 までしかありません。それより細かい階層が必要な場合は、コンテンツの構造を見直して階層を浅くすべきです。