目次に戻る

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

概要

カテゴリー
配置できる場所
内容モデル
属性
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、aria-level属性を伴うheadingデフォルトroleは、role属性値に指定すべきでない。
  • デフォルトrole以外では、tabpresentationnoneを指定可。
視覚系ブラウザデフォルトとして期待されるCSS

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

  h1 {
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    font-size: 2.00em;
    font-weight: bold;
  }

  h2 {
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    font-size: 1.50em;
    font-weight: bold;
  }

  h3 {
    margin-block-start: 1.00em;
    margin-block-end: 1.00em;
    font-size: 1.17em;
    font-weight: bold;
  }

  h4 {
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    font-size: 1.00em;
    font-weight: bold;
  }

  h5 {
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
    font-size: 0.83em;
    font-weight: bold;
  }

  h6 {
    margin-block-start: 2.33em;
    margin-block-end: 2.33em;
    font-size: 0.67em;
    font-weight: bold;
  }

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

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

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

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

  :matches(section,article,aside,nav) :matches(section,article,aside,nav) :matches(section,article,aside,nav) :matches(section,article,aside,nav) :matches(section,article,aside,nav) h1 {
    margin-block-start: 2.33em;
    margin-block-end: 2.33em;
    font-size: 0.67em;
  }
  
意味・用法

直近で所属する(明示又は黙示の)セクション見出しを表す。

h1要素が最上位ランクとなり、h2要素以下は順次ランクが下がっていく。

明示セクション入れ子による階層レベルとh1-h6要素自体のランクを合わせるか、見出しをすべてh1要素として明示セクション入れ子による階層レベルでのみランクを表すかのいずれかが強く推奨される。

W3C : HTML5.3:(見出しをすべてh1要素として明示セクション入れ子による階層レベルでのみランクを表すよりも、)明示セクション入れ子による階層レベルとh1-h6要素自体のランクを合わせるべきであるとされていた。

W3C : HTML5.3見出しをつけて新たなセクション又は下位のセクションを創設することを意図しないのであれば、副題、サブタイトル、代替タイトル、キャッチコピーをマークアップするために、この要素を用いてはならないとされていた。

私見・補足

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

表示確認

ソース

  <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>
  
表示結果

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

未対応ブラウザでは、section要素入れ子に伴う文字サイズの変化がない。

IE6表示のスクリーンショット
IE6表示:section要素の入れ子に伴うh1要素の文字サイズの変化がない

IE7からIE8も同様。