アウトラインのルールと例：HTML Living Standard各要素別メモ

アウトラインのルール

前提

前提１：Heading contentは、直近の祖先たる黙示セクション又は明示セクションの見出しとなる要素である。
前提２：明示セクションは、Sectioning contentによってマークアップされる。
前提３：黙示セクションは、明示セクション（Sectioning content）の入れ子による構造化がされてない場合に、Heading contentの存在によって構成される。
前提４（仕様における例示から推測）：黙示セクションの始端は、見出し（Heading content）である。その終端は、「始端より後に出てくる見出し（Heading content）の中で、始端の見出し（Heading content）と同等又は上位の階層レベルのもののうち、最初のもの」の直前。この考え方で終端が見つからない場合は、body要素（黙示セクションと明示セクションの混在文書の場合は、Sectioning contentたる要素も）の終了タグの直前が終端。
前提５（仕様における例示から推測）：明示セクション（Sectioning content）の入れ子による構造化がされている場合は、body要素は、文書構造の大元として、最上位セクションとなる。

ルール

ルール０：見出し（Heading content）を出てきた順番に拾い上げて、見出し（Heading content）の階層レベルに沿って階層化することで、アウトラインが構成される。
ルール１：見出し（Heading content）の階層レベルは、h1要素がレベル1、h2要素がレベル2、h3要素がレベル3、h4要素がレベル4、h5要素がレベル5、h6要素がレベル6。数値が大きいほど下位。
ルール２：HTML文書に出てくる見出し（Heading content）の少なくても一つは、最上位レベル（レベル1）の見出し（つまり、h1要素）であるべきである。
ルール３：HTML文書に最初に出てくる見出し（Heading content）は、最上位レベル（レベル1）の見出し（つまり、h1要素）であることが推奨される。
ルール４：見出し（Heading content）の階層レベルは、その直前の順番に出てくる見出し（Heading content）の階層レベルと比べて、上位、同等、又は、1レベルだけ下位でなければならない。
ルール５：見出し（Heading content）の階層レベルが上位であるほど、その祖先セクションの個数は少なくなる。
ルール６：最上位レベル（レベル1）の見出し（つまり、h1要素）が複数あること自体は非準拠ではない。
ユーザーエージェントに対する特記事項：アウトラインによって相互作用的な目次を生成する場合は、（ユーザーの操作によって）関連する見出し（Heading content）に飛ばすようにすべきである。

私見・補足：

私見１：ルール２及びルール３が推奨であって必須（MUST）ではないのは、当該HTML文書が巨大文書の分割ページのうちの一つである場合も考慮したためであると思われる。
私見２：ルール１及びルール５を勘案すれば、明示セクション（Sectioning content）の入れ子による構造化がされている場合は、見出し（Heading content）の階層レベルは、明示セクション（Sectioning content）の入れ子の階層レベルと一致させることが望ましい。そうすれば、ルール５に違反することを防止できる。
私見３：私見２を勘案すれば、見出し（Heading content）がない明示セクション（Sectioning content）は望ましくない。見出し（Heading content）がないbody要素も望ましくない。
私見４：body要素による最上位セクションに、最上位レベル（レベル1）の見出し（h1要素）が複数あること自体は、ルール６により非準拠ではないが、本当にそうする必要性があるのかは熟慮した方がいい。もしかしたらそれらの見出しの本来の階層レベルは2（h2要素）であり、より上位の単一の見出し（つまり、１個だけのh1要素）をつけることが可能かもしれない。
私見５：文書構造が把握しづらくなるので、黙示セクションと明示セクションの混在は望ましくない。

アウトラインの例１

ソース


  <body>
  <h1>１</h1>
    <h2>２－１</h2>
      <h3>３－１</h3>
        <p>３－１の文章</p>
      <h3>３－２</h3>
        <p>３－２の文章</p>
    <h2>２－２</h2>
      <h3>３－３</h3>
        <p>３－３の文章</p>
      <h3>３－４</h3>
        <p>３－４の文章</p>
  </body>

アウトラインの解析結果

h1:１
1. h2:２－１
  1. h3:３－１
  2. h3:３－２
2. h2:２－２
  1. h3:３－３
  2. h3:３－４

アウトラインの例２

ソース


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

アウトラインの解析結果

h1:１
1. h2:２－１
  1. h3:３－１
  2. h3:３－２
2. h2:２－２
  1. h3:３－３
  2. h3:３－４

アウトラインの例１の黙示セクションを明示セクション（Sectioning content）にしたもの。この方が構造の把握やスタイリングなどがしやすくなる。

アウトラインの例３

ソース


  <body>
  <h1>１</h1>
    <section>
      <h1>２－１</h1>
        <section>
          <h1>３－１</h1>
          <p>文章</p>
        </section>
        <section>
          <h1>３－２</h1>
          <p>文章</p>
        </section>
    </section>
    <section>
      <h1>２－２</h1>
        <section>
          <h1>３－３</h1>
          <p>文章</p>
        </section>
        <section>
          <h1>３－４</h1>
          <p>文章</p>
        </section>
    </section>
  </body>

アウトラインの解析結果

h1:１
h1:２－１
h1:３－１
h1:３－２
h1:２－２
h1:３－３
h1:３－４

見出し同士を比べると、「見出しの階層レベルがより上位になったわけでもないのに、その祖先セクションの個数が少なくなっている」ので、ルール５に違反している。よって、この例は非準拠である。

アウトラインの例４

ソース


  <body>
  <h1>１</h1>
    <section>
      <h2>２－１</h2>
        <section>
          <h3>３－１</h3>
          <p>文章</p>
        </section>
          <h3>３－２</h3>
          <p>文章</p>
    </section>
    <h2>２－２</h2>
      <h3>３－３</h3>
        <p>３－３の文章</p>
      <h3>３－４</h3>
        <p>３－４の文章</p>
  </body>

アウトラインの解析結果

h1:１
1. h2:２－１
  1. h3:３－１
  2. h3:３－２
2. h2:２－２
  1. h3:３－３
  2. h3:３－４

私見・補足：私見５に反しているので、望ましくない（<h3>３－２</h3>、<h2>２－２</h2>、<h3>３－３</h3>、<h3>３－４</h3>が、黙示セクション）。

アウトラインの例５

ソース


  <body>
  <h1>１</h1>
    <article>
        <section>
          <h2>３－１</h2>
          <p>文章</p>
        </section>
        <section>
          <h2>３－２</h2>
          <p>文章</p>
        </section>
    </article>
  </body>

アウトラインの解析結果

h1:１
1. h2:３－１
2. h2:３－２

アウトラインの例３やアウトラインの例７とは違って、ルール５に明白に違反しているとはいえないので、この例は準拠ではある。

私見・補足：<h2>３－１</h2>と<h2>３－２</h2>は、私見２に反しているので、望ましくない。また、<article>のセクションは、私見３に反しているので望ましくない。

アウトラインの例６

ソース


  <body>
  <h1>１</h1>
    <article>
        <section>
          <h3>３－１</h3>
          <p>文章</p>
        </section>
        <section>
          <h3>３－２</h3>
          <p>文章</p>
        </section>
    </article>
  </body>

アウトラインの解析結果

h1:１
1. (h2が存在しない)
  1. h3:３－１
  2. h3:３－２

<h3>３－１</h3>の階層レベルがその直前の順番に出てくる<h1>１</h1>の階層レベルより2レベル下位なので、ルール４の違反となり、非準拠である。

私見・補足：<article>のセクションは、私見３に反しているので望ましくない。

アウトラインの例７

ソース


  <body>
    <section>
      <h1>２－１</h1>
    </section>
  <h2>１</h2>
  </body>

アウトラインの解析結果

h1:２－１
1. h2:１

ルール５に明白に違反しているので、この例は非準拠である。

アウトラインの例８

ソース


  <body>
  <header>
    <nav>
      <h2>サイト案内</h2>
      <ul>
        <li><a href="sitetop.html">トップページ</a></li>
        <li><a href="sitemap.html">サイトマップ</a></li>
        <li><a href="sitesearch.html">サイト内検索</a></li>
      </ul>
    </nav>
  <h1>１</h1>
  </header>
    <section>
      <h2>２－１</h2>
      <p>文章</p>
    </section>
    <section>
      <h2>２－２</h2>
      <p>文章</p>
    </section>
  </body>

アウトラインの解析結果

(h1が存在しない)
1. h2:サイト案内
h1:１
1. h2:２－１
2. h2:２－２

ルール３に違反しているので、この例は推奨されない。<h1>１</h1>を<nav>の前にもっていくべきである。

アウトラインの例９

ソース


  <body>
  <section>
    <h2>２－１</h2>
    <p>文章</p>
  </section>
  <section>
    <h2>２－２</h2>
    <p>文章</p>
  </section>
  </body>

アウトラインの解析結果

(h1が存在しない)
1. h2:２－１
2. h2:２－２

ルール２及びルール３に違反しているので、この例は推奨されない。

私見・補足：body要素による最上位セクションが私見３に反しているので望ましくない。

アウトラインの例１０

ソース


  <body>
  <section>
    <h1>１－１</h1>
    <p>文章</p>
  </section>
  <section>
    <h1>１－２</h1>
    <p>文章</p>
  </section>
  </body>

アウトラインの解析結果

h1:１－１
h1:１－２

私見・補足：いずれの見出しも私見２に反しているので望ましくない（アウトラインの例９のようにしないと、見出しとセクションの階層レベルが一致しない）。また、body要素による最上位セクションが私見３に反しているので望ましくない。

アウトラインの例１１

ソース


  <body>
    <h1>１－１</h1>
      <p>文章</p>
    <h1>１－２</h1>
      <p>文章</p>
  </body>

アウトラインの解析結果

h1:１－１
h1:１－２

私見・補足：私見４を参照。この場合は、いずれの見出しも、body要素による最上位セクションの見出しであると同時に、それぞれの黙示セクションの見出しでもあるということになるだろう。