<h1>–<h6>: HTML の見出し要素

試してみましょう

<h1>Beetles</h1>
<h2>External morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>

h1,
h2,
h3,
h4 {
  margin: 0.1rem 0;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
  padding-left: 20px;
}

h3 {
  font-size: 1.2rem;
  padding-left: 40px;
}

h4 {
  font-size: 1rem;
  font-style: italic;
  padding-left: 60px;
}

属性

見出し要素にはグローバル属性のみがあります。

使用上の注意

• 見出し情報は、ユーザーエージェントが自動的に文書の目次を作成するために使用することがあります。
• テキストの大きさを変えるために見出し要素を使用しないでください。代わりに CSS の font-size プロパティを使用してください。
• 見出しレベルを飛ばさないでください。常に <h1> から始め、次に <h2>、以下も同様にしてください。

1 つのページに複数の <h1> 要素を使用しない

1 つのページに複数の <h1> 要素を使用することは HTML 標準では認められていますが（入れ子でない限り）、これはよい習慣とはみなされません。1 つのページには、ページの内容を説明する 1 つの <h1> 要素（文書の <title> 要素と同様）を置くのが一般的です。

1 ページに 1 つの <h1> を使用し、レベルを飛ばさずに見出しを入れ子にすることを推奨します。

<h1> 要素に対して統一されたフォントサイズを指定

2025 年 5 月以前、HTML 標準では、 <h1> 要素は <section>、 <article>、<aside>、<nav> 要素内にある時は、 <h2> として（font-size が小さめであり、調整された margin-block）、さらに 1 階層内包されている場合は <h3> として、というようにレンダリングされるべきであると規定していました。この特別な文脈依存の既定のスタイルは、現在削除されました。

古いコンテキスト依存の既定のスタイルを実装するブラウザーで <h1> のレンダリングを統一するには、次のスタイルルールを使用してください。

h1 {
  margin-block: 0.67em;
  font-size: 2em;
}

あるいは、<h1> を対象とする他のスタイルルールを上書きしないようにするには、特異性がゼロの :where() を使用できます。

:where(h1) {
  margin-block: 0.67em;
  font-size: 2em;
}

アクセシビリティ

ナビゲーション

スクリーンリーダーの利用者にとって一般的なナビゲーション技法として、ページのコンテンツを判断するために、すばやく見出しから見出しへジャンプすることがあります。このため、見出しレベルを飛ばさないようにすることが重要です。見出しレベルを飛ばしてしまうと、このようにナビゲーションしている人が、見つからない見出しがどこにあるのかわからなくなり混乱してしまいます。

悪い例:

<h1>見出しレベル 1</h1>
<h3>見出しレベル 3</h3>
<h4>見出しレベル 4</h4>

良い例:

<h1>見出しレベル 1</h1>
<h2>見出しレベル 2</h2>
<h3>見出しレベル 3</h3>

入れ子

見出しはページのコンテンツの構造を反映して、節として入れ子になることがあります。ほとんどのスクリーンリーダーは、ページ上のすべての見出しを番号付きリストとして生成することもできます。これにより、ユーザーはコンテンツの階層構造をすばやく把握し、様々な見出しに移動することができます。

以下のページ構造があった場合、

<h1>Beetles</h1>

<h2>Etymology</h2>

<h2>Distribution and Diversity</h2>

<h2>Evolution</h2>
<h3>Late Paleozoic</h3>
<h3>Jurassic</h3>
<h3>Cretaceous</h3>
<h3>Cenozoic</h3>

<h2>External Morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>
<h3>Legs</h3>
<h3>Wings</h3>
<h3>Abdomen</h3>

スクリーンリーダーは次のようなリストを生成します。

1. h1 Beetles

   1. h2 Etymology

   2. h2 Distribution and Diversity

   3. h2 Evolution

      1. h3 Late Paleozoic
      2. h3 Jurassic
      3. h3 Cretaceous
      4. h3 Cenozoic

   4. h2 External Morphology

      1. h3 Head

         1. h4 Mouthparts

      2. h3 Thorax

         1. h4 Prothorax
         2. h4 Pterothorax

      3. h3 Legs

      4. h3 Wings

      5. h3 Abdomen

見出しが入れ子になった場合、見出しレベルは節が閉じる際に「飛ばされる」ことがあります。

• Headings • Page Structure • WAI Web Accessibility Tutorials
• MDN "WCAG を理解する ― ガイドライン 1.3 の解説"
• Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
• MDN "WCAG を理解する ― ガイドライン 2.4 の解説"
• Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0
• Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0
• Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0

区分コンテンツのラベル付け

スクリーンリーダー利用者のための他のナビゲーションテクニックとして、区分コンテンツの一覧を作成して、ページのレイアウトを特定するために使用するものがあります。

区分コンテンツは aria-labelledby および id 属性の組み合わせで、セクションの目的を詳細に記述するラベルを付けることができます。このテクニックは、同一ページに 2 つ以上の区分要素がある場合に有用です。

例

<header>
  <nav aria-labelledby="primary-navigation">
    <h2 id="primary-navigation">主要ナビゲーション</h2>
    <!-- ナビゲーションアイテム -->
  </nav>
</header>

<!-- ページコンテンツ -->

<footer>
  <nav aria-labelledby="footer-navigation">
    <h2 id="footer-navigation">フッターナビゲーション</h2>
    <!-- navigation items -->
  </nav>
</footer>

この例では、スクリーンリーダーは 2 つの <nav> セクションがあり、1 つが "Primary navigation" でもう 1 つが "Footer navigation" であるとアナウンスするでしょう。ラベルが提供されていない場合は、スクリーンリーダーを使用している人がそれぞれの nav 要素の中身を調べて、それぞれの用途を確かめなければならないかもしれません。

• aria-labelledby 属性の利用
• Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials

例

すべての見出し

以下のコードでは、すべての見出しレベルを示しています。

<h1>見出しレベル 1</h1>
<h2>見出しレベル 2</h2>
<h3>見出しレベル 3</h3>
<h4>見出しレベル 4</h4>
<h5>見出しレベル 5</h5>
<h6>見出しレベル 6</h6>

ページの例

以下のコードでは、いくつかの見出しとその配下のコンテンツを示しています。

<h1>見出し要素</h1>
<h2>概要</h2>
<p>ここにテキストを書く…</p>

<h2>例</h2>
<h3>例 1</h3>
<p>ここにテキストを書く…</p>

<h3>例 2</h3>
<p>ここにテキストを書く…</p>

<h2>See also</h2>
<p>ここにテキストを書く…</p>

技術的概要

仕様書

ブラウザーの互換性

html.elements.h1

html.elements.h2

html.elements.h3

html.elements.h4

html.elements.h5

html.elements.h6

関連情報

• <p>
• <div>
• <section>