HTML5.1勧告でh1の使い方に変更〜アウトラインの作成

2016年11月にHTML5.1の勧告ではセクショニング・コンテンツ内であっても適切なランクの「heading」を使用する事とされています。

HTML5から「h1」の使い方が大きく変更されていました。
セクショニングタグの新規登場により、ネストされたセクショニング・コンテンツ内で「h1」を使用ことが可能となったため、同一ページで複数の「h1」が登場することも可能になっていました。
旧来のh1〜h6による暗黙的なアウトライン作成に慣れた制作者は少なからず困惑したものでした。

それが、HTML5.1ではThe use of nested section elements each with an h1 to create an outline.の一文が削除されることでゆるやかに変更されています。
セクショニングタグ内の見出しはh1から開始するのではなく、旧来のようにページ全体のアウトラインのレベルに応じて「heading」タグを使用するようにしましょう。

参考：HTML 5.1 W3C Recommendation, 1 November 20164.3.10. Headings and sections

Sections may contain headings of a rank equal to their section nesting level. Authors should use headings of the appropriate rank for the section’s nesting level.

Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.

参考例：HTML 5.1　W3C Recommendation, 1 November 2016　EXAMPLE28より

例１

<body>
  <h1>Apples</h1>
  <p>Apples are fruit.</p>
  <section>
    <h2>Taste</h2>
    <p>They taste lovely.</p>
    <h3>Sweet</h3>
    <p>Red apples are sweeter than green ones.</p>
    <h3>Color</h3>
    <p>Apples come in various colors.</p>
  </section>
</body>

セクショニングタグを使う事でより明確に表現することが推奨されています。
例２

<body>
  <h1>Apples</h1>
  <p>Apples are fruit.</p>
  <section>
    <h2>Taste</h2>
    <p>They taste lovely.</p>
    <section>
      <h3>Sweet</h3>
      <p>Red apples are sweeter than green ones.</p>
    </section>
  </section>
  <section>
    <h3>Color</h3>
    <p>Apples come in various colors.</p>
  </section>
</body>

例１と例２は上記の両方のドキュメントは意味的に同一であり、準拠しているユーザーエージェントで同じアウトラインを生成します。と説明されているが、現実的にはアウトラインのでき方が違うはずです。
outliner5（準拠してないユーザーエージェント？）でアウトラインを描くと次のようになります。

例１のアウトライン

例２のアウトライン

ここのところの説明はちょっと解らない説明です。HTML5までの書き方だと「Color」の見出しはh3でなくてh2にしたいところです。そうすると明確に例１とアウトラインは異なります。
そして、そもそも例１のコード自体も解せません。「Taste」の中で「Sweet」と「Color」が同レベルになっていますが、本来「Taste」と「Color」が同レベルになりそうなものです。

ここは危険な解釈をするのではなく、適切なセクショニングとそれに見合ったheadingレベルを使用すると解釈しておくのがよさそうです。

次に、今回削除されたHTML5.0で可能だったタグ付け方法は次の例のようなものです。

例３

<body>
 <h1>Apples</h1>
  <p>Apples are fruit.</p>
  <section>
    <h1>Taste</h1>
    <p>They taste lovely.</p>
    <section>
      <h1>Sweet</h1>
      <p>Red apples are sweeter than green ones.</p>
    </section>
  </section>
  <section>
    <h1>Color</h1>
    <p>Apples come in various colors.</p>
  </section>
</body>

この書き方はやめておいた方がよさそうです。

コメント