h1-h6要素：HTML Living Standard各要素別メモ

概要

カテゴリー

配置できる場所

上記カテゴリーの要素が置ける場所。
hgroup要素の子として。

内容モデル

Phrasing content

属性

グローバル属性

HTML構文におけるタグの省略

省略不可。

WAI-ARIA

デフォルトroleは、aria-level属性を伴うheading。デフォルトroleをrole属性値に指定することは、推奨されない。
デフォルトrole以外では、tab、presentation、noneを指定可。

視覚系ブラウザのデフォルトとして期待されるCSS


  h1, h2, h3, h4, h5, h6 {
    display: block;
    unicode-bidi: isolate;
    font-weight: bold;
  }

  h1 {
    margin-block: 0.67em;
    font-size: 2.00em;
  }

  h2 {
    margin-block: 0.83em;
    font-size: 1.50em;
  }

  h3 {
    margin-block: 1.00em;
    font-size: 1.17em;
  }

  h4 {
    margin-block: 1.33em;
    font-size: 1.00em;
  }

  h5 {
    margin-block: 1.67em;
    font-size: 0.83em;
  }

  h6 {
    margin-block: 2.33em;
    font-size: 0.67em;
  }

  :is( section,article,aside,nav) h1 {
    margin-block: 0.83em;
    font-size: 1.50em;
  }

  :is( section,article,aside,nav)
   :is( section,article,aside,nav) h1
  {
    margin-block: 1.00em;
    font-size: 1.17em;
  }

  :is( section,article,aside,nav)
   :is( section,article,aside,nav)
    :is( section,article,aside,nav) h1
  {
    margin-block: 1.33em;
    font-size: 1.00em;
  }

  :is( section,article,aside,nav)
   :is( section,article,aside,nav)
    :is( section,article,aside,nav)
     :is( section,article,aside,nav) h1
  {
    margin-block: 1.67em;
    font-size: 0.83em;
  }

  :is( section,article,aside,nav)
   :is( section,article,aside,nav)
    :is( section,article,aside,nav)
     :is( section,article,aside,nav)
      :is( section,article,aside,nav) h1
  {
    margin-block: 2.33em;
    font-size: 0.67em;
  }

意味・用法: （直近で）所属する（明示又は黙示の）セクションの見出しを表す。

私見・補足

見出しの階層のつけかたと、セクションの入れ子関係については、下記のいずれかによる。

Sectioning contentを全く用いなくても、h1-h6要素はそれだけで黙示セクションを作成するので、h1要素からh6要素までを階層レベルに沿って配置することによって、黙示セクション間の入れ子関係を規定できる（「配置例１」を参照）。

配置例１


        <body>
        <h1>例１</h1>
          <h2>第一章</h2>
            <h3>第一節</h3>
              <p>文章</p>
            <h3>第二節</h3>
              <p>文章</p>
          <h2>第二章</h2>
            <h3>第一節</h3>
              <p>文章</p>
            <h3>第二節</h3>
              <p>文章</p>
        </body>

Sectioning contentを適切に入れ子関係にしたうえで、さらに各セクションの見出しについては階層レベルに沿ってh1要素からh6要素とすればより完璧で、これが推奨される方法となる（「配置例２」を参照）。

配置例２


        <body>
        <h1>例３</h1>
          <section>
            <h2>第一章</h2>
              <section>
                <h3>第一節</h3>
                <p>文章</p>
              </section>
              <section>
                <h3>第二節</h3>
                <p>文章</p>
              </section>
          </section>
          <section>
            <h2>第二章</h2>
              <section>
                <h3>第一節</h3>
                <p>文章</p>
              </section>
              <section>
                <h3>第二節</h3>
                <p>文章</p>
              </section>
          </section>
        </body>

表示確認

ソース


  <div>
  <h1>h1</h1>
    <h2>h2</h2>
      <h3>h3</h3>
        <h4>h4</h4>
          <h5>h5</h5>
            <h6>h6</h6>
  </div>
  <div>
    <h1>h1</h1>
    <section>
      <h1>h1</h1>
      <section>
        <h1>h1</h1>
        <section>
          <h1>h1</h1>
          <section>
            <h1>h1</h1>
            <section>
              <h1>h1</h1>
            </section>
          </section>
        </section>
      </section>
    </section>
  </div>

表示結果

以下、インラインフレームで表示