<h1></h1> ~ <h6></h6>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / ヘッディング・コンテンツ / パルパブル・コンテンツ
利用場所 ヘッディング・コンテンツが置ける場所 / hgroup要素の子要素として
内容 フレージング・コンテンツ

h1~h6要素は、セクションの見出しを表します。h1に近いほど見出しのレベルが高くなり、h6に近いほど低くなります。


<h1>ランク1の見出し</h1>
<h2>ランク2の見出し</h2>
<h3>ランク3の見出し</h3>
<h4>ランク4の見出し</h4>
<h5>ランク5の見出し</h5>
<h6>ランク6の見出し</h6>

見出しの付け方

通常は、セクションの階層に合わせてh1要素から順に見出しを付けていきます。

以下の例では、親セクションにh1要素、子セクションにh2要素、孫セクションにh3要素を使用しています。

h1 親セクション
h2 子セクション
h3 孫セクション
h2 子セクション
h3 孫セクション

上記を、セクショニング要素を使って明示的にマークアップすると次のようになります。

<body>

   <h1>親セクション</h1>

   <section>

      <h2>子セクション</h2>

      <section>

         <h3>孫セクション</h3>

      </section>

   </section>

   <section>

      <h2>子セクション</h2>

      <section>

         <h3>孫セクション</h3>

      </section>

   </section>

</body>

セクショニング要素を使わずに、次のようにマークアップすることもできます。

<body>

<h1>親セクション</h1>

<h2>子セクション</h2>
<h3>孫セクション</h3>

<h2>子セクション</h2>
<h3>孫セクション</h3>

</body>

アウトラインについて

文書に見出しを配置すると、アウトラインの項目が作成されます。

詳しくは下記のページをご覧ください。

hgroup要素について

hgroup要素を使用すると、h1-h6要素p要素をグループ化することができます。これにより、見出しに対する小見出し、代替タイトル、タグラインを表せるようになります。

詳しくは下記のページをご覧ください。

要素のデフォルトスタイル

一般的なブラウザでは、この要素内のテキストは太字で表示され、見出しのランクによって文字サイズが変化します。また、この要素の上下にはマージンが入ります。

h1要素の見出しテキスト(サイズ 200%)

h2要素の見出しテキスト(サイズ 150%)

h3要素の見出しテキスト(サイズ 120%)

h4要素の見出しテキスト(サイズ 100%)

h5要素の見出しテキスト(サイズ 80%)
h6要素の見出しテキスト(サイズ 70%)
  • 上記の文字サイズは、ひとつの目安としてご覧ください。(ブラウザにより多少異なるかもしれません)
  • Chrome、Edge、Firefoxなどでは、セクションの階層に合わせてh1要素の文字サイズが変化します。(上記の表示例では、CSSの設定で文字サイズを調整しています)
旧HTMLからの変更点
  • HTML5:align属性が廃止されました。
  • HTML5:h1要素のみで見出しを付けることが可能となりました。
  • HTML5.1:h1要素のみで見出しを付けることが不可となりました。
  • HTML LS:再度、h1要素のみで見出しを付けることが可能となりました。(仕様書のサンプルコードを参照)
  • HTML LS:利用場所が微妙に変わりました。(フロー・コンテンツが置ける場所 → ヘッディング・コンテンツが置ける場所)
  • HTML LS:hgroup要素が定義されたことで、その子要素として配置できるようになりました。

使用例

セクショニング要素を使ってマークアップした例

<h1>ランク1の見出し</h1>
<p>1階層目の内容</p>

<article>

    <h2>ランク2の見出し</h2>
    <p>2階層目の内容</p>

    <section>

        <h3>ランク3の見出し</h3>
        <p>3階層目の内容</p>

    </section>

    <section>

        <h3>ランク3の見出し</h3>
        <p>3階層目の内容</p>

        <section>

            <h4>ランク4の見出し</h4>
            <p>4階層目の内容</p>

        </section>

	<p>3階層目の内容</p>

    </section>

    <p>2階層目の内容</p>

</article>

表示例

ランク1の見出し

1階層目の内容

ランク2の見出し

2階層目の内容

ランク3の見出し

3階層目の内容

ランク3の見出し

3階層目の内容

ランク4の見出し

4階層目の内容

3階層目の内容

2階層目の内容