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

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / ヘッディング・コンテンツ / パルパブル・コンテンツ
利用場所 フロー・コンテンツが置ける場所
内容 フレージング・コンテンツ

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


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

見出しの付け方

HTML5では、見出しの付け方を選べるようになりました。

以下の例のように、階層に合わせたランクを使うか、全ての階層にh1要素を使って見出しを付けることができます。(この2つの方法は、1つの文書内で混在させないようにします)

階層に合わせたランクを使う
h1 大見出し
h2 中見出し
h3 小見出し
h2 中見出し
h3 小見出し
全ての階層にh1要素を使う
h1 大見出し
h1 中見出し
h1 小見出し
h1 中見出し
h1 小見出し
  • 後者の全ての階層にh1要素を使うという書き方は、HTML 5.1では使えなくなったようです。

セクションについて

HTML5では、見出しを配置すると暗黙的なセクションが生成されます。

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

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

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

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

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

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

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

h5要素の見出しテキスト(サイズ 80%)
h6要素の見出しテキスト(サイズ 70%)
  • 上記の文字サイズの数値は、ひとつの目安としてご覧ください。(ブラウザにより多少異なるかもしれません)
  • IE(9以上)、Firefox、Chromeでは、セクションの階層に合わせてh1要素の文字サイズが変化します。(上記の表示例では、CSSの設定で文字サイズを調整しています)
  • マージンの大きさは、見出しのランクにより異なります。大まかな数値は、h1:0.7em、h2:0.8em、h3:1em、h4:1.3em、h5:1.7em、h6:2.3em、です。(ブラウザにより多少異なるかもしれません)
HTML5における変更点
  • align属性が廃止されました。
  • 見出しの付け方を選べるようになりました。
HTML 5.1における変更点
  • 入れ子にされたセクション内でのh1要素の使用は、廃止の扱いになったようです。(階層の深さに応じてh2~h6要素を使用する必要があるそうです)

使用例

階層に合わせたランクを使用した例

<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>

        <section>

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

        </section>

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

    </section>

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

</article>

表示例

ランク2の見出し

2階層目の内容

ランク3の見出し

3階層目の内容

ランク3の見出し

3階層目の内容

ランク4の見出し

4階層目の内容

ランク4の見出し

4階層目の内容

3階層目の内容

2階層目の内容

全ての階層にh1要素を使用した例

<!DOCTYPE html>
<html>
<head>

<title>文書のタイトル</title>

</head>
<body>

<h1>文書のタイトル</h1>


<article>

<h1>記事のタイトル</h1>

<section>
<h1>セクションのタイトル</h1>
</section>

</article>


</body>
</html>

表示例

サンプル画面へ新規ウィンドウで表示

  • IE(9以上)、Firefox、Chromeでは、セクションの階層に合わせてh1要素の文字サイズが変化します。