定義と使い方

hに1から6までの数字を付けた<h1>、<h2>、<h3>、<h4>、<h5>、<h6>タグは
タイトルを表し、Webページの構造において1から6までの数字で指定される6段階のタイトルレベルを持ちます。

このタグは意味論的な観点から、文書全体（<h1>に該当）やセクション・領域（<h2>～<h6>に該当）の階層レベル、テーマや内容を把握するうえで重要な指標となります。

特徴

  • これらのタグは1から6までの数字で指定される6段階の見出しレベルを持ち、
  • これは入れ子になった領域の階層的なレベルを表します。
  • <h1>タグは最上位の領域（文書全体）に使用される見出しであり、
  • <h2>はその下のレベル、<h3>は<h2>より一段階下のレベルの見出しタグです。
  • このようにして<h6>タグまで続きます。

基本例

HTML すべてのレベルの見出しタグのマークアップ例 
<h1>見出しレベル1</h1>
<h2>見出しレベル2</h2>
<h3>見出しレベル3</h3>
<h4>見出しレベル4</h4>
<h5>見出しレベル5</h5>
<h6>見出しレベル6</h6>

これらの見出しタグは、Webページ（文書）の概要と階層的な構造を表すために使用します。

HTML Webページ（文書）の概要や階層的な構造を示すために使用した例 
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>見出しタグ</title>
    </head>
    <body>
        <h1>見出しタグ</h1>
        <p>hに1から6までの数字を付けたh1、h2、h3、h4、h5、h6タグを指します。</p>
        <p>該当する領域の見出し（heading）を表します。</p>
        <section>
            <h2>見出しタグの使用</h2>
            <p>これらのタグは、Webページ（文書）の概要や階層的な構造を表すために使用します。</p>
            <h3>見出しタグを使用する利点</h3>
            <ul>
                <li>
                    コンテンツの各領域に見出しを付けることで、文書の構造を明確に表現できます。
                    これにより、ユーザーはコンテンツを素早く把握し、関連する領域を識別できます。
                </li>
                <li>
                    検索エンジンはページの見出しを分析してコンテンツのテーマを理解し、検索結果に反映するため、
                    検索エンジン最適化（SEO）に役立ちます。
                </li>
                <li>
                    視覚障害者やその他の障害を持つユーザーに対して、
                    Webページの構造を伝えるうえで役立ちます。
                </li>
            </ul>
            <h3>見出しタグ使用時の注意点</h3>
            <p>コンテンツの意味的な構造を明確に付与する必要があります。</p>
        </section>
        <section>
            <h2>見出しタグのアクセシビリティ</h2>
            <p>.....</p>
            .....
        </section>
        ....
    </body>
</html>

コード補足説明
<section>タグは、文書やアプリケーションにおける一般的なセクションを表します。
このセクションは、特定のテーマに基づいてまとめられたコンテンツのグループを意味し、テーマの見出しは必須ではありませんが、一般的には併せて使用されます。

使用方法の参考事項

  • テキストのサイズや太さを理由に見出しタグを使用しないでください。代わりに、CSSのテキストサイズに関するプロパティであるfont-sizeや、テキストの太さに関するプロパティであるfont-weightを使用してください。
  • 階層構造の順序において段階を飛ばすことは避けてください。見出しのレベルは、常に階層的な構造の順序を示す必要があります。必ず<h1>タグの次に<h2>、その次に<h3>というように、順序どおりにマークアップしてください。そうすることで、論理的なコンテンツ構造や概要を容易に把握できます。
  • すべてのWebページで<h1>～<h6>までの見出しタグをすべて使用する必要はありません。Webページの階層構造が深くない場合は<h1>タグのみを使用することもできますし、<h1>～<h2>、<h1>～<h3>、<h1>～<h4>、あるいは<h1>～<h5>タグまでを使用する場合もあります。
HTML 階層構造の順序において段階を飛ばすことは避けてください。 
<h1>見出しレベル1</h1>
<h3>見出しレベル3</h3> <!-- 論理的にも構造的にもh2が期待されます。 -->
<h4>見出しレベル4</h4>

1つのページで複数の<h1>タグを使用しないこと

<h1>タグは最上位の領域に使用される見出しです。Webページの主要な見出しやテーマとして使用されるため、1つのWebページにつき1つの<h1>タグのみを使用することが望ましいです。これは、Webアクセシビリティにおけるスクリーンリーダーや検索エンジン最適化にも役立ちます。

role属性で見出しタグの役割を付与する

role属性は、HTML要素を拡張する概念として、HTML要素の構造や意味をより明確に付与する役割を持つ属性です。

role="heading"を使用すると、該当するタグを見出しタグとして識別します。この方法は見出しタグを使用できない状況で用いられ、Webアクセシビリティのためにスクリーンリーダーや支援技術へ情報を提供します。

次の例を通して確認してみましょう。

HTML 
<!-- <h3> 見出し要素を使用した例 -->
<h3>見出しレベル3</h3>
<p>見出しレベル3に関する内容</p>

上記のコードは、見出しタグである<h3>タグを使用した例です。

次のコードは、role="heading"を使用して、本来は特別な意味を持たない<div>タグに見出しタグとしての意味を付与し、さらにaria-level="3"を使用して見出しレベルを3、つまり<h3>として明示した例です。

HTML 
<!-- role="heading"とaria-level属性を使用した例 -->
<div role="heading" aria-level="3">見出しレベル3</div>
<p>見出しレベル3に関する内容</p>

aria-level属性はrole="heading"が適用されたタグに使用され、値は1～6まで指定でき、その値は見出しタグのレベルと同じ意味を持ちます。例えば、aria-level="2"は<h2>と同等のレベルです。

特別な場合を除き、role="heading"を使用するのではなく、見出しタグを使用してください。

Webアクセシビリティ向上のための見出しタグの活用

スクリーンリーダーを使用するユーザーにとって、コンテンツを容易に把握し、効率的に探索できることは非常に重要です。スクリーンリーダーを使用しないユーザーの視点のみを考慮して制作されたWebサイトやWebコンテンツは、スクリーンリーダーを使用するユーザーに不便や混乱を与える可能性があります。Webの普遍性は、Webの発展において非常に重要な価値でもあります。

スクリーンリーダーを使用するユーザーに対して、コンテンツ領域のレイアウトに関するラベルを提供することで、該当するコンテンツを容易に把握する助けとなります。

スクリーンリーダー向けのラベルを提供するためのラベルテキスト属性があります。aria-labelまたはaria-labelledby属性を使用することで、Webアクセシビリティをより向上させることができます。次のリンクを参照してください。

この2つの属性のうち、aria-labelledby属性とid属性を併用することで、見出しタグと関連付け、コンテンツ領域のレイアウトに関するラベルを提供できます。言うまでもありませんが、この手法はWebページ内に多数のコンテンツ領域が存在する場合に有効です。

HTML 
<nav aria-labelledby="main-menu-heading">
    <h2 id="main-menu-heading">メインメニュー</h2>
    <!-- メインメニューの項目 -->
</nav>

コード補足説明
<nav>タグは、他のWebページへのリンクや、現在のWebページ内のコンテンツへ移動するためのナビゲーション（navigation）用リンク（links）を含む領域を表します。一般的な例としては、メニュー、目次、索引などがあります。

上記のコードにおけるaria-labelledby="main-menu-heading"は、現在のコンテンツ領域である<nav>タグのラベルを設定する部分です。具体的には、main-menu-headingというidを持つ見出しタグが<h2>として定義されています。これにより、スクリーンリーダーが<nav>タグに到達した際、「メインメニュー」というラベルを提供できます。

このようにすることで、スクリーンリーダーを使用するユーザーが、該当するコンテンツをより迅速かつ容易に理解し、探索する手助けとなります。

技術的な文法の要約

h1～h6タグの技術的な文法の要約
許可される親要素 フローコンテンツを許可するすべての要素
許可されるコンテンツ 構文コンテンツ
暗黙のrole属性値 heading
許可されるrole属性値 tab, presentation 또는 none

構文上の注意点

<address>タグ内では使用できません。

ブラウザ互換性

h1～h6タグのブラウザ互換性
タグ
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
<h1>~<h6> はい はい はい はい

仕様書

h1~h6タグの仕様書
仕様書
<h1>~<h6> HTML Standard
#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

参考資料

関連項目