目次に戻る

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

概要

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

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

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

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

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

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

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

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

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

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

  :is( section,article,aside,nav)
   :is( section,article,aside,nav)
    :is( section,article,aside,nav) h1
  {
    margin-block-start: 1.33em;
    margin-block-end: 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-start: 1.67em;
    margin-block-end: 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-start: 2.33em;
    margin-block-end: 2.33em;
    font-size: 0.67em;
  }
  
意味・用法

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

私見・補足

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

表示確認

ソース

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

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