アウトラインについて

アウトラインとは、文書の階層構造を表すリストです。文書内に配置される見出し（h1-h6要素）のレベルによって、階層関係を表現することができます。

<body>

  <h1>親セクションの見出し</h1>

    <h2>子セクションAの見出し</h2>

      <h3>孫セクションの見出し</h3>

    <h2>子セクションBの見出し</h2>

</body>

上記のマークアップの場合は、アウトラインは次のようになります。

  1. 1. 親セクションの見出し
    1. 1. 子セクションAの見出し
      1. 1. 孫セクションの見出し
    2. 2. 子セクションBの見出し

見出しの配置について

アウトライン内におけるh1-h6要素の配置には次のようなルールがあります。

先行する見出しに続く各見出しは、前の見出しレベルより上位のレベル、等しいレベル、または1つ下位のレベルである必要があります。

前の見出しレベルより上位のレベルは、次の例ではh4 → h2の部分が該当します。この場合、先行する見出しの後には上位の階層（この例ではレベル2）に新たな項目が追加されることになります。

<body>

  <h1>親セクションの見出し</h1>

    <h2>子セクションAの見出し</h2>

      <h3>孫セクションの見出し</h3>

        <h4>ひ孫セクションの見出し</h4>

    <h2>子セクションBの見出し</h2>

</body>

前のレベルと等しいレベルは、次の例ではh2 → h2の部分が該当します。この場合、先行する見出しの後には同じ階層に新たな項目が追加されることになります。

<body>

  <h1>親セクションの見出し</h1>

    <h2>子セクションAの見出し</h2>

    <h2>子セクションBの見出し</h2>

      <h3>孫セクションの見出し</h3>

</body>

前の見出しレベルより1つ下位のレベルは、次の例ではh1 → h2とh2 → h3の部分が該当します。この場合、先行する見出しの後には1つ下の階層に新たな項目が追加されることになります。

<body>

  <h1>親セクションの見出し</h1>

    <h2>子セクションAの見出し</h2>

      <h3>孫セクションの見出し</h3>

    <h2>子セクションBの見出し</h2>

</body>

また、上記以外にも次のような内容が仕様書には記載されています。

  • 文書内に見出しがある場合は、少なくとも1つは h1 であるべき
  • 文書内の最初の見出しが h1 でないことは勧められない

明示的なマークアップ

見出しによって表される階層構造は、セクショニング・コンテンツによって明示的にマークアップすることができます。

以下の2つのコードは、階層構造的に同等となります。

<body>

  <h1>親セクションの見出し</h1>

    <h2>子セクションAの見出し</h2>

      <h3>孫セクションの見出し</h3>

    <h2>子セクションBの見出し</h2>

</body>

<body>

  <h1>親セクションの見出し</h1>

  <section>

    <h2>子セクションAの見出し</h2>

    <section>

      <h3>孫セクションの見出し</h3>

    </section>

  </section>

  <section>

    <h2>子セクションBの見出し</h2>

  </section>

</body>

アウトラインの例

次の例では、文書内に3つの見出しを配置しています。

<body>

  <h1>親セクションの見出し</h1>
  <p>親セクションの段落</p>

    <h2>子セクションAの見出し</h2>
    <p>子セクションAの段落</p>

    <h2>子セクションBの見出し</h2>
    <p>子セクションBの段落</p>

</body>
  1. 1. 親セクションの見出し
    1. 1. 子セクションAの見出し
    2. 2. 子セクションBの見出し

次の例では、3階層の構造になっています。

<body>

  <h1>親セクションの見出し</h1>
  <p>親セクションの段落</p>

    <h2>子セクションAの見出し</h2>
    <p>子セクションAの段落</p>

       <h3>孫セクションAの見出し</h3>
       <p>孫セクションAの段落</p>

       <h3>孫セクションBの見出し</h3>
       <p>孫セクションBの段落</p>

    <h2>子セクションBの見出し</h2>
    <p>子セクションBの段落</p>

</body>
  1. 1. 親セクションの見出し
    1. 1. 子セクションAの見出し
      1. 1. 孫セクションAの見出し
      2. 2. 孫セクションBの見出し
    2. 2. 子セクションBの見出し

次のように、複数のトップレベルの見出しを配置することもできます。

<body>

  <h1>親セクションAの見出し</h1>
  <p>親セクションAの段落</p>

  <h1>親セクションBの見出し</h1>
  <p>親セクションBの段落</p>

  <h1>親セクションCの見出し</h1>
  <p>親セクションCの段落</p>

</body>
  1. 1. 親セクションAの見出し
  2. 2. 親セクションBの見出し
  3. 3. 親セクションCの見出し

セクショニング・ルートについて

独自のアウトラインを持つことができるとされていたセクショニング・ルートは、2022年7月に廃止となりました。

不明な点

仕様書や関連資料を読んだものの、私の中では理解しきれなかったことをリストアップしておきます。

  • セクショニング・コンテンツはアウトラインに影響しなくなったのか？（そのように読み取れる）
  • その場合、見出しを持たないセクショニング・コンテンツのアウトラインはどのようになるのか？（直近祖先の見出しと同じ階層になる？）
  • また、セクショニング・コンテンツを入れ子にし、各セクションの見出しに h1 を使用した場合、アウトラインはどのようになるのか？（全てが最上位の階層になってしまうのか？）

上記については、理解できたらこのページで追記いたします。

参考リンク（外部サイト）