<h1>–<h6>: HTML の見出し要素
<h1>
~ <h6>
は HTML の要素で、セクションの見出しを 6 段階で表します。<h1>
が最上位で、<h6>
が最下位です。既定では、すべての見出し要素はブロックレベルボックスを作成し、改行して始まり、その包含ブロックの中で利用できる幅いっぱいに広がります。
試してみましょう
属性
見出し要素にはグローバル属性のみがあります。
使用上の注意
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
Beetles-
h2
Etymology -
h2
Distribution and Diversity -
h2
Evolutionh3
Late Paleozoich3
Jurassich3
Cretaceoush3
Cenozoic
-
h2
External Morphology-
h3
Headh4
Mouthparts
-
h3
Thoraxh4
Prothoraxh4
Pterothorax
-
h3
Legs -
h3
Wings -
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">Primary navigation</h2>
<!-- navigation items -->
</nav>
</header>
<!-- ページコンテンツ -->
<footer>
<nav aria-labelledby="footer-navigation">
<h2 id="footer-navigation">Footer navigation</h2>
<!-- navigation items -->
</nav>
</footer>
この例では、スクリーンリーダーは 2 つの <nav>
セクションがあり、1 つが "Primary navigation" でもう 1 つが "Footer navigation" であるとアナウンスするでしょう。ラベルが提供されていない場合は、スクリーンリーダーを使用している人がそれぞれの nav
要素の中身を調べて、それぞれの用途を確かめなければならないかもしれません。
技術的概要
コンテンツカテゴリー | フローコンテンツ, 見出しコンテンツ, 知覚可能コンテンツ |
---|---|
許可されている内容 | 記述コンテンツ |
タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
許可されている親要素 | フローコンテンツを受け入れるすべての要素。 |
暗黙の ARIA ロール | heading |
許可されている ARIA ロール |
tab 、presentation 、
none の何れか
|
DOM インターフェイス | HTMLHeadingElement |
仕様書
Specification |
---|
HTML Standard # the-h1,-h2,-h3,-h4,-h5,-and-h6-elements |
ブラウザーの互換性
html.elements.h1
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
h1 |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
html.elements.h2
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
h2 |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
html.elements.h3
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
h3 |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
html.elements.h4
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
h4 |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
html.elements.h5
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
h5 |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
html.elements.h6
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
h6 |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support