目次に戻る

アウトライン例:HTML Living Standard各要素別メモ

アウトラインルール

セクション見出しは一対一対応が基本だが、必ずしもそうはならない場合もある。一対一対応になるようにセクションを明示化することが望ましいだろうし、一対一対応にならないような黙示セクションを形成してしまうような見出しの配置は望ましくないだろう。

Sectioning contentは、セクションを明示する要素である。

Sectioning contentは、Heading contentによって見出しが明示されてない場合でも、黙示見出しをもつ。

黙示見出しの文言を具体的に解析して特定することは困難なので、黙示見出しを「untitled section」と表示する解析ツールが多い。ただし、nav要素黙示見出しは「navigation」、aside要素黙示見出しは「sidebar」などとするものもあるようだ。また、単純に「該当セクションには明示見出しがない」旨を表示するだけのものもある。

黙示見出しは避け、Heading contentによって見出しを明示することが推奨される。

Heading contentは、原則としてその直近の所属セクション見出しを表す。

Heading contentがあるが、Sectioning contentによるセクションの明示がされてない場合は、当該Heading contentによって黙示セクションが構成される。

原則として、黙示セクションの始まりはHeading content自身であり、その終わりは一定の規則に沿って決まる。

明示見出し及び黙示見出しを一定の規則に沿って階層化することによって、当該HTML文書アウトラインが構成される。

Sectioning contentによるセクションの明示が一切ないHTML文書では、h1要素からh6要素までの階層に従って、アウトラインが構成される。

Sectioning contentによる明示セクションが適切に入れ子になっていれば、その入れ子構造に従って、アウトラインが構成される。

Sectioning contentによる明示セクションの中に、Heading contentによる見出しが2個以上ある場合は、当該明示セクション内に複数の黙示セクションが構成されるという複雑な構成になり、アウトラインもそれに沿って構成される。これでは分かりにくいので、セクションを明示化するなら中途半端ではなく徹底すべきであろう。

Sectioning rootのうち、body要素は、当該HTML文書全体の最上位セクションとなる。この点を失念して、最上位セクションが「untitled section」であるHTML文書を作成してしまう事例は多いと思われる。

body要素を除くSectioning rootの各要素は、独立した最上位セクションとしてその内部に独自のアウトラインをもち、その独自のアウトラインHTML文書全体のアウトラインには現れない。

見出しは、セクションを跳び越せない。

hgroup要素は、その内容のうち最上位のh1-h6要素のランクを有する1個の見出しとして、上記のルールを適用する。

アウトライン例1(オール黙示セクション

ソース

  <body>
  <h1>1</h1>
    <h2>2-1</h2>
      <h3>3-1</h3>
        <p>3-1の文章</p>
      <h3>3-2</h3>
        <p>3-2の文章</p>
    <h2>2-2</h2>
      <h3>3-3</h3>
        <p>3-3の文章</p>
      <h3>3-4</h3>
        <p>3-4の文章</p>
  </body>
  
アウトライン解析結果
    1. 2-1
      1. 3-1
      2. 3-2
    2. 2-2
      1. 3-3
      2. 3-4

「1」は、body要素による最上位セクション見出しである。

参考:h1-h6要素のランクのみによる解析結果
  1. h1:1
    1. h2:2-1
      1. h3:3-1
      2. h3:3-2
    2. h2:2-2
      1. h3:3-3
      2. h3:3-4

アウトライン例2(明示セクション見出し階層の完全一致)

ソース

  <body>
  <h1>1</h1>
    <section>
      <h2>2-1</h2>
        <section>
          <h3>3-1</h3>
          <p>文章</p>
        </section>
        <section>
          <h3>3-2</h3>
          <p>文章</p>
        </section>
    </section>
    <section>
      <h2>2-2</h2>
        <section>
          <h3>3-3</h3>
          <p>文章</p>
        </section>
        <section>
          <h3>3-4</h3>
          <p>文章</p>
        </section>
    </section>
  </body>
  
アウトライン解析結果
    1. 2-1
      1. 3-1
      2. 3-2
    2. 2-2
      1. 3-3
      2. 3-4
参考:h1-h6要素のランクのみによる解析結果
  1. h1:1
    1. h2:2-1
      1. h3:3-1
      2. h3:3-2
    2. h2:2-2
      1. h3:3-3
      2. h3:3-4

アウトライン例3(明示セクション入れ子関係のみによるアウトライン

ソース

  <body>
  <h1>1</h1>
    <section>
      <h1>2-1</h1>
        <section>
          <p>文章</p>
          <h1>3-1</h1>
          <p>文章</p>
        </section>
        <section>
          <h1>3-2</h1>
          <p>文章</p>
        </section>
    </section>
    <section>
      <h1>2-2</h1>
        <section>
          <h1>3-3</h1>
          <p>文章</p>
        </section>
        <section>
          <h1>3-4</h1>
          <p>文章</p>
        </section>
    </section>
  </body>
  
アウトライン解析結果
    1. 2-1
      1. 3-1
      2. 3-2
    2. 2-2
      1. 3-3
      2. 3-4

見出しのすべてがh1要素であっても、明示セクション入れ子関係が適切ならば、アウトラインも適切に出る。

「3-1」のセクションの中身を見て分かるように、セクションを明示化すれば、見出しの前にある中身に対しても当該見出しの支配範囲だということを示せる。

参考:h1-h6要素のランクのみによる解析結果
  1. h1:1
  2. h1:2-1
  3. h1:3-1
  4. h1:3-2
  5. h1:2-2
  6. h1:3-3
  7. h1:3-4

アウトライン例4

ソース

  <body>
  <h6>1</h6>
    <section>
      <h4>2-1</h4>
        <section>
          <h3>3-1</h3>
          <p>文章</p>
        </section>
        <section>
          <h1>3-2</h1>
          <p>文章</p>
        </section>
    </section>
    <section>
      <h2>2-2</h2>
        <section>
          <h1>3-3</h1>
          <p>文章</p>
        </section>
        <section>
          <h5>3-4</h5>
          <p>文章</p>
        </section>
    </section>
  </body>
  
アウトライン解析結果
    1. 2-1
      1. 3-1
      2. 3-2
    2. 2-2
      1. 3-3
      2. 3-4

明示セクション入れ子関係が完璧なら、h1要素からh6要素までの階層関係は無視され、セクション入れ子関係によってのみアウトラインが形成される。

参考:h1-h6要素のランクのみによる解析結果
  1. h1:[missing]
    1. h2:[missing]
      1. h3:[missing]
        1. h4:[missing]
          1. h5:[missing]
            1. h6:1
        2. h4:2-1
      2. h3:3-1
  2. h1:3-2
    1. h2:2-2
  3. h1:3-3
    1. h2:[missing]
      1. h3:[missing]
        1. h4:[missing]
          1. h5:3-4

アウトライン例5(トップレベル見出しが2個以上ある場合)

ソース

  <body>
  <h1>1-1</h1>
    <p>1-1の文章</p>
  <h1>1-2</h1>
    <p>1-2の文章</p>
  </body>
  
アウトライン解析結果
  1. 1-1
  2. 1-2

「1-1」及び「1-2」は、body要素による最上位セクション見出しであると同時に、それぞれの黙示セクション見出しでもあるという、二重状態になる。

このような状態は望ましくない。

参考:h1-h6要素のランクのみによる解析結果
  1. h1:1-1
  2. h1:1-2

アウトライン例6

ソース

  <body>
  <section>
    <h1>1-1</h1>
    <p>文章</p>
  </section>
  <section>
    <h1>1-2</h1>
    <p>文章</p>
  </section>
  </body>
  
アウトライン解析結果
  1. [body element with no heading]
    1. 1-1
    2. 1-2

これは、アウトライン例5の黙示セクションを単純に明示化したものである。

これでは、body要素による最上位セクションが、黙示見出しとなってしまう。

参考:h1-h6要素のランクのみによる解析結果
  1. h1:1-1
  2. h1:1-2

アウトライン例7

ソース

  <body>
  <h1>1</h1>
    <section><!--明示-->
      <h2>2-1</h2>
        <p>2-1の文章</p><!--黙示-->
      <h2>2-2</h2>
        <p>2-2の文章</p><!--黙示-->
    </section><!--明示-->
  </body>
  
アウトライン解析結果
    1. 2-1
    2. 2-2

アウトライン例5のようなことは、明示セクション内部でも起こりうる。

「2-1」及び「2-2」は、明示セクション見出しであると同時に、それぞれの黙示セクション見出しでもあるという、二重状態になる。

このような状態は望ましくない。

参考:h1-h6要素のランクのみによる解析結果
  1. h1:1
    1. h2:2-1
    2. h2:2-2

アウトライン例8(見出しセクションを跳び越せない)

ソース

  <body>
    <nav>
      <h2>目次</h2>
      <p>目次の文章</p>
    </nav>
  <h1>1</h1>
    <section>
      <h2>2</h2>
      <p>文章</p>
    </section>
  </body>
  
アウトライン解析結果
  1. [body element with no heading]
    1. 目次

見出しセクションを跳び越せないため、「目次」セクションは「1」セクション子セクションとはみなされない。

その結果、「目次」セクション親セクションbody要素とみなされ、その見出し黙示見出しとみなされる。

その結果、body要素による最上位セクションには、黙示見出しと「1」という2個の見出しが存在し、それぞれの見出しはそれぞれの黙示セクション見出しでもあるという二重状態となる。

このような状態は望ましくない。

これを避けるには、「目次」セクションを「1」の下にもってきたうえで、見た目上はどうしても上部にもっていきたい場合はスタイルシートで調整するというテクニックが必要になる(これはこれで、ソースと表示で配置が異なるという分かりにくい構成になるが)。

個人的には、このような仕様には不満だ。見出しの前にあろうとも子セクションと判断していいだろうに。セクション明示化の利点は見出しの支配範囲を見出しの前にも拡張できることなんだから、見出しの前にあるセクションも支配できていいはずだ。

参考:h1-h6要素のランクのみによる解析結果
  1. h1:[missing]
    1. h2:目次
  2. h1:1
    1. h2:2

アウトライン例9(Sectioning rootによる独立セクション

ソース

  <body>
  <h1>1</h1>
    <section>
      <h2>2-1</h2>
      <p>文章</p>
      <figure>
        <h1>3</h1>
        <p>文章</p>
      </figure>
    </section>
    <section>
      <h2>2-2</h2>
      <p>文章</p>
    </section>
  </body>
  
アウトライン解析結果
    1. 2-1
    2. 2-2

Sectioning rootに属するfigure要素内の「3」は無視され、HTML文書全体のアウトラインには現れない。

参考:h1-h6要素のランクのみによる解析結果
  1. h1:1
    1. h2:2-1
  2. h1:3
    1. h2:2-2

アウトライン例10

ソース

  <body>
    <p>本題に入る前の注意書き。</p>
    <article>
      <h1>1</h1>
      <p>文章</p>
    </article>
    <footer>
      <p>文章</p>
    </footer>
  </body>
  
アウトライン解析結果
  1. [body element with no heading]

body要素による最上位セクションに、明示見出しがなく、黙示見出しとなっている。

HTML文書本体が見出しなしというのは望ましくないだろうから、最上位セクション明示見出しを入れるべきだろう。

参考:h1-h6要素のランクのみによる解析結果
  1. h1:1

アウトライン例11

ソース

  <body>
    <p>本題に入る前の注意書き。</p>
    <main>
      <h1>1</h1>
      <p>文章</p>
    </main>
    <footer>
      <p>文章</p>
    </footer>
  </body>
  
アウトライン解析結果

main要素は、Sectioning contentではないため、セクションを構成しない。

よって、「1」は、直近の所属セクションであるbody要素による最上位セクション見出しとなる。

参考:h1-h6要素のランクのみによる解析結果
  1. h1:1

アウトライン例12(オール黙示見出し

ソース

  <body>
    <nav>
      <p>文章</p>
    </nav>
    <section>
      <p>文章</p>
    </section>
    <section>
      <section>
        <p>文章</p>
      </section>
      <section>
        <p>文章</p>
      </section>
    </section>
    <aside>
      <p>文章</p>
    </aside>
  </body>
  
アウトライン解析結果
  1. [body element with no heading]
    1. [nav element with no heading]
    2. [section element with no heading]
    3. [section element with no heading]
      1. [section element with no heading]
      2. [section element with no heading]
    4. [aside element with no heading]

このようなHTML文書は望ましくない。

参考:h1-h6要素のランクのみによる解析結果
  1. 何もなし。

アウトライン例13(黙示セクション明示セクション黙示見出し明示見出しの混在)

ソース

  <body>
  <h1>1</h1>
    <nav>
      <p>目次の文章</p>
    </nav>
    <section>
      <h2>2-1</h2>
        <section>
          <h3>3-1</h3>
          <p>文章</p>
        </section>
        <h3>3-2</h3>
          <p>3-2の文章</p><!--黙示-->
    </section>
    <section>
      <h2>2-2</h2>
        <h3>3-3</h3>
          <p>3-3の文章</p><!--黙示-->
        <section>
          <p>文章</p>
        </section>
    </section>
  </body>
  
アウトライン解析結果
    1. [nav element with no heading]
    2. 2-1
      1. 3-1
      2. 3-2
    3. 2-2
      1. 3-3
      2. [section element with no heading]

分かりやすい明確な方針を定めている場合は別として、分かりにくい混在状態は避けた方がいいだろう。

参考:h1-h6要素のランクのみによる解析結果
  1. h1:1
    1. h2:2-1
      1. h3:3-1
      2. h3:3-2
    2. h2:2-2
      1. h3:3-3

アウトライン例14(混在事例その2)

ソース

  <body>
  <h1>1</h1>
    <h2>2-1</h2>
      <h4>3-1</h4>
    <section>
      <h5>2-2</h5>
        <h6>3-2</h6>
    </section>
    <section>
      <h5>2-3</h5>
      <h1>2-4</h1>
    </section>
    <h5>2-5</h5>
      <h6>3-3</h6>
  </body>
  
アウトライン解析結果
    1. 2-1
      1. 3-1
    2. 2-2
      1. 3-2
    3. 2-3
    4. 2-4
    5. 2-5
      1. 3-3

黙示セクション明示セクションの混在、見出しセクションを跳び越せないことによる階層の初期化、h1-h6要素の階層を無視した使用によって、分かりにくくなっている。

参考:h1-h6要素のランクのみによる解析結果
  1. h1:1
    1. h2:2-1
      1. h3:[missing]
        1. h4:3-1
          1. h5:2-2
            1. h6:3-2
          2. h5:2-3
  2. h1:2-4
    1. h2:[missing]
      1. h3:[missing]
        1. h4:[missing]
          1. h5:2-5
            1. h6:3-3