<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階層目の内容