HTML の <h1>
–<h6>
要素は、セクションの見出しを6段階で表します。 <h1>
が最上位で、 <h6>
が最下位です。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
コンテンツカテゴリ | フローコンテンツ, 見出しコンテンツ, 知覚可能コンテンツ |
---|---|
許可されている内容 | 記述コンテンツ |
タグの省略 | 不可。開始と終了タグの両方が必要。 |
許可されている親要素 | フローコンテンツを受け入れるすべての要素。 <hgroup> は非推奨になったので、見出し要素をその子要素として使用しないでください。 |
暗黙の ARIA ロール | heading |
許可されている ARIA ロール | tab , presentation または none |
DOM インターフェイス | HTMLHeadingElement |
属性
見出し要素にはグローバル属性のみがあります。
align
属性は廃止されたので、使用しないでください。
使用上の注意
- 見出し情報は、ユーザーエージェントが自動的に文書の目次を作成するために使用するうことがあります。
- テキストの大きさを変えるために見出し要素を使用しないでください。代わりに CSS の
font-size
プロパティを使用してください。 - 見出しレベルを飛ばすことは避けてください。常に
<h1>
から始め、次に<h2>
、以下も同様にしてください。 <h1>
はページまたはビューにつき1つだけ使用してください。内容の全体的な目的を簡潔に記載しなければなりません。- 複数の
<h1>
を使用してもエラーにはなりませんが、これは最善の方法とは見なされていません。これは読み上げソフトや SEO で有利です。 - 1つのページで
<h1>
を2回以上使用することは避けてください。詳しくは区分化要素を参照してください。
例
すべての見出し
以下のコードでは、すべての見出しレベルを示しています。
<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
要素の中身を調べて、それぞれの用途を確かめなければならないかもしれません。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
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> の定義 |
勧告 |
ブラウザーの互換性
BCD tables only load in the browser