【HTML5.1勧告】セクション要素内見出しレベル仕様の変更について

By | 2016年11月6日

html5.1

2016年11月1日付でW3CがHTML5.1を勧告しました。
HTML5からの変更差分はこちらにまとめられていますので、詳細はこちらを見ていただくとして、
今回はその中で「removed」つまり削除された仕様の一覧の中にあった次の項目に注目したいと思います。

・The use of nested section elements each with an h1 to create an outline.
(・アウトラインを生成するためにそれぞれh1を持つネストされたセクションを使用すること)

HTML5でのアウトラインと見出しのルール

2014年勧告のHTML5では、「セクショニング・コンテンツの入れ子によって正しく階層構造がマークアップされている場合、その中で使用される見出しレベルは問わない」という仕様がありました。
このことはHTML4.01からHTML5になったときの大きな仕様変更のひとつであり、HTML5が登場した初期には盛んに紹介された項目であったため、ご存知の方も多いかと思います。
W3CのHTML5仕様では以下の2つのマークアップはいずれも同じアウトラインを生成するとして事例紹介されています。

<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>
  <h2>Color</h2>
  <p>Apples come in various colors.</p>
 </section>
</body>

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

HTML5.1でのアウトラインと見出しレベルのルール

ところが、HTML5.1では上記のうち「各セクションの見出しレベルを全てh1にする」事例が削除され、

Authors should use headings of the appropriate rank for the section’s nesting level.
(著者は、セクションのネストレベルに応じて適切なランクの見出しを使用する必要があります。)

◎出典:https://www.w3.org/TR/2016/REC-html51-20161101/sections.html#headings-and-sections

との記載がなされています。
著者は、セクションのネストレベルに応じて適切なランクの見出しを使用する必要があります。
つまり、HTML5.1の仕様ではセクショニング・コンテンツによって正しく情報構造をマークアップしていても、それだけで正しくアウトラインを生成することはないということになります。
文書のアウトライン=情報の階層構造はあくまで見出しレベルによって判定される以前の仕様に戻ったという風に解釈して良いと思われます。

仕様変更によって何か影響はあるのか?

この仕様変更によって何か実務的に影響はあるのか? という点ですが、
実質的には特に何もないと思われます。
理由は、そもそもネストされたセクション要素の見出しを全てh1にしてマークアップしているケースはほとんど無いと思われるからです。

仮に全てのセクションの見出しをh1にしてしまっていたとしても、それで「今まで正しくアウトライン判定されていたものが急に判定されなくなる」ということはありません。
なぜなら今までもそのマークアップでは正しくアウトライン判定されていなかったはずだからです。

今回削除されたアウトライン判定の仕様は、当初から「at risk(今後削除される可能性がある仕様)」扱いであり、W3C仕様でも「スクリーンリーダー等の支援技術やブラウザでこの仕様をサポートしている環境はまだ無い」と注意を促していました。
そして仕様としては残しながらも「制作者は正しくアウトラインを伝える必要がある場合、セクションのネストレベルに応じた見出しレベルを使用することを推奨」していました。

もともと仕様だけはあったけれども実質的には機能していなかったものを、今回正式に削除しただけのものであるので、仕様変更に伴う実質的な影響は「何もない」ということになります。

ではセクションを入れ子にして階層構造をマークアップすることは意味が無いのか?

アウトラインが見出しレベルによってのみ判断されるということであれば、「セクション要素なんか使わなくても良いのではないか?」と思う方もおられるかと思います。
個人的には、「使っても使わなくても結果は全く同じ」なのであれば別に好きにすればいいと思います。
ただ、見出しレベルによる暗黙のアウトラインはあくまで「見出しから次の見出しまでをひとつのセクションとしてみなす」というものであるため、確実に意図した範囲がひとつのセクションとしてみなされているとは限りません。

例えば次のようなケース。

<body>
  <h1>第一階層の見出し</h1>
  <p>(1)hogehogehoge</p>
  <h2>第二階層の見出し</h2>
  <p>(2)hagehagehage</p>
  <p>(3)fugafugafuga</p>
</body>

この場合、①は第一階層に所属、②と③は第二階層に所属するコンテンツであると自動的に認識され、それ以外の解釈はありえません。
しかしセクション要素によって各見出しに所属するセクションの範囲を明示して次のようにマークアップすれば、

<body>
  <h1>第一階層の見出し</h1>
  <p>(1)hogehogehoge</p>
  <section>
    <h2>第二階層の見出し</h2>
    <p>(2)hagehagehage</p>
  </section>
  <p>(3)fugafugafuga</p>
</body>

③のコンテンツは第一階層に所属するコンテンツであることを明確に表現することができるのです。
ひとつのセクションに含まれるコンテンツの範囲を明確に定義できるのはやはりセクション要素であるので、セクション要素によって各セクションの範囲と階層を正しくマークアップした上で、各階層の見出しレベルはセクションのネストレベルに応じて適切に設定するというのがやはり理想的なマークアップであると思います。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA