HTML の <h1>
–<h6>
要素は、セクションの見出しを6段階で表します。 <h1>
が最上位で、 <h6>
が最下位です。
この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
コンテンツカテゴリ | フローコンテンツ, 見出しコンテンツ, 知覚可能コンテンツ |
---|---|
許可されている内容 | 記述コンテンツ |
タグの省略 | 不可。開始と終了タグの両方が必要。 |
許可されている親要素 | フローコンテンツを受け入れるすべての要素。 <hgroup> は非推奨になったので、見出し要素をその子要素として使用しないでください。 |
許可されている ARIA ロール | tab , presentation |
DOM インターフェイス | HTMLHeadingElement |
属性
見出し要素はグローバル属性を持ちます。
align
属性は廃止されたので、使用しないでください。
使用上の注意
- 見出し情報はユーザーエージェントによって使用される可能性があります。例えば、文書の目次を自動的に作成するなどです。
- フォントサイズを縮小する目的で低いレベルの見出しを使用しないでください。代わりに CSS の
font-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>
入れ子
ヘッダーはページのコンテンツの構造を反映して、節として入れ子になることがあります。多くの読み上げソフトはページのすべての見出しの順序付きリストを生成し、利用者がコンテンツの階層構造を手早く特定することもできます。
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> の定義 |
勧告 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに貢献したい場合は、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
h1 | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 1 | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応