HTML の <h1><h6> 要素は、セクションの見出しを6段階で表します。 <h1> が最上位で、 <h6> が最下位です。

コンテンツカテゴリ フローコンテンツ, 見出しコンテンツ, 知覚可能コンテンツ
許可されている内容 記述コンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 フローコンテンツを受け入れるすべての要素。 <hgroup> は非推奨になったので、これの子要素にしないでください。
許可されている ARIA ロール tab, presentation
DOM インターフェイス HTMLHeadingElement

属性

見出し要素はグローバル属性を持ちます。

align 属性は廃止されたので、使用しないでください。

使用上の注意

  • 見出し情報はユーザーエージェントによって使用される可能性があります。例えば、文書の目次を自動的に作成するなどです。
  • フォントサイズを縮小する目的で低いレベルの見出しを使用しないでください。代わりに CSSfont-size を使用してください。
  • 見出しレベルを飛ばすことは避けてください。常に <h1> から始め、次に <h2>、以下も同様にしてください。
  • 1つのページで <h1> を2回以上使用することは避けてください。詳しくはDefining sections in HTML5 ドキュメントのセクションとアウトラインを参照してください。

全ての見出し

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

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

以下の様に出力されます。

ページの例

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

<h1>Heading elements</h1>
<h2>Summary</h2>
<p>Some text here...</p>

<h2>Examples</h2>
<h3>Example 1</h3>
<p>Some text here...</p>

<h3>Example 2</h3>
<p>Some text here...</p>

<h2>See also</h2>
<p>Some text here...</p>

以下の様に出力されます。

アクセシビリティへの配慮

読み上げソフトの利用者のよくあるナビゲーションテクニックとして、ページの内容を手早く特定するために、見出しから見出しへとジャンプすることがあります。このため、見出しレベルを飛ばさないようにすることが重要です。飛ばすとこのようにナビゲーションしている人が、ヘッダーがないと疑問を残すことになり、混乱を生じさせます。

悪い例

<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>

良い例

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</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

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

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

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

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

Example

<header>
  <nav aria-labeledby="primary-navigation">
    <h2 id="primary-navigation">Primary navigation</h2>
    <!-- navigation items -->
  </nav>
</header>

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

<footer>
  <nav aria-labeledby="footer-navigation">
    <h2 id="footer-navigation">Footer navigation</h2>
    <!-- navigation items -->
  </nav>
</footer>

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

仕様書

仕様書 状態 備考
HTML Living Standard
<h1>, <h2>, <h3>, <h4>, <h5>, and <h6> の定義
現行の標準  
HTML5
<h1>, <h2>, <h3>, <h4>, <h5>, and <h6> の定義
勧告  
HTML 4.01 Specification
<h1>, <h2>, <h3>, <h4>, <h5>, and <h6> の定義
勧告  

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり あり1 あり あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4 あり あり あり

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, ethertank, Potappo, dskmori
最終更新者: mfuji09,