<h1>–<h6>: HTML の見出し要素
HTML の <h1>
–<h6>
要素は、セクションの見出しを 6 段階で表します。<h1>
が最上位で、<h6>
が最下位です。
試してみましょう
コンテンツカテゴリー | フローコンテンツ, 見出しコンテンツ, 知覚可能コンテンツ |
---|---|
許可されている内容 | 記述コンテンツ |
タグの省略 | 不可。開始と終了タグの両方が必要。 |
許可されている親要素 | フローコンテンツを受け入れるすべての要素。<hgroup> は非推奨になったので、見出し要素をその子要素として使用しないでください。 |
暗黙の ARIA ロール | heading |
許可されている ARIA ロール | tab , presentation または none (en-US) |
DOM インターフェイス | HTMLHeadingElement |
属性
見出し要素にはグローバル属性のみがあります。
使用上の注意
1 ページに複数の <h1>
要素を使用することは避けてください
1 つのページに複数の <h1>
要素を使用することは HTML 標準では認められていますが(入れ子でない限り)、これはベストプラクティスとはみなされません。1 つのページには、ページの内容を説明する 1 つの <h1>
要素(ドキュメントの <title> 要素
と同様)を置くのが一般的です。
メモ: 入れ子になったセクショニング要素の中で複数の <h1>
要素を入れ子にすることは、HTML 標準の古いバージョンでは認められていました。しかし、これはベストプラクティスとはみなされず、現在は非適合となっています。詳しくは、There Is No Document Outline Algorithm をご覧ください。
1 ページに 1 つの <h1>
を使用し、レベルをスキップせずに見出しを入れ子にすることを推奨します。
例
すべての見出し
以下のコードでは、すべての見出しレベルを示しています。
<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>
入れ子
見出しはページのコンテンツの構造を反映して、節として入れ子になることがあります。多くの読み上げソフトはページのすべての見出しの順序付きリストを生成し、利用者がコンテンツの階層構造を手早く特定することもできます。
h1
Beetlesh2
Etymologyh2
Distribution and Diversityh2
Evolutionh3
Late Paleozoich3
Jurassich3
Cretaceoush3
Cenozoic
h2
External Morphologyh3
Headh4
Mouthparts
h3
Thoraxh4
Prothoraxh4
Pterothorax
h3
Legsh3
Wingsh3
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
属性の組み合わせで、セクションの目的を詳細に記述するラベルを付けることができます。このテクニックは、同一ページに二つ以上の区分要素がある場合に有用です。
Example
<header>
<nav aria-labelledby="primary-navigation">
<h2 id="primary-navigation">Primary navigation</h2>
<!-- navigation items -->
</nav>
</header>
<!-- ページコンテンツ -->
<footer>
<nav aria-labelledby="footer-navigation">
<h2 id="footer-navigation">Footer navigation</h2>
<!-- navigation items -->
</nav>
</footer>
この例では、読み上げ技術は二つの <nav>
セクションがあり、一つが "Primary navigation" でもう一つが "Footer navigation" であるとアナウンスするでしょう。ラベルが提供されていない場合は、読み上げソフトを使用している人がそれぞれの nav
要素の中身を調べて、それぞれの用途を確かめなければならないかもしれません。
仕様書
Specification |
---|
HTML Standard # the-h1,-h2,-h3,-h4,-h5,-and-h6-elements |
ブラウザーの互換性
BCD tables only load in the browser