HTML 5.1で変更されたsection要素の使い方、header要素とfooter要素のネストについて解説

2016年11月1日に、HTML 5.1が勧告されました。HTML 5から新しく加えられた点、削除された点、変更された点がいろいろあります。
その中から、ページのアウトラインを組み立てる上で重要なsection要素の使い方、header要素とfooter要素のネストについて具体的な事例を添えて紹介します。

サイトのキャプチャ

Document Outlines in HTML 5.1

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

私は以前、HTMLのページにvalidなアウトラインを持つ重要性について説明しました。

HTMLのページで、ドキュメントのアウトラインはページ上のコンテンツの構造を明示します。これはブラウザに有用で、アウトラインを使用してドキュメントの目次などを作成することができます。また、スクリーンリーダで、ページの操作性を向上させることもできます。
Using Heading Elements to Create a Document Outline

先日、HTML 5.1が公式にリリースされました。
興味深い変更が数多くあり、そのうちの2つはvalidなアウトラインに関係しています。

削除
アウトラインを作成するh1要素を入れ、ネストされたsection要素の使用。
変更
header要素とfooter要素がセクショニング要素内にある場合、ネストすることが可能。

参考: HTML 5.1の変更点 -W3C

ネストされたsection要素を含むアウトラインの作成方法

HTML 5.0で、ドキュメントのアウトラインを作成する新しい方法が提起されました。見出しのレベルにはh1要素だけを使用する代わりに、アウトラインの構造はsection要素をネストして定義するものです。

マークアップを見てみましょう。

このマークアップで、下記のようなドキュメントのアウトラインを期待していました。

サイトのキャプチャ

期待するドキュメントのアウトライン

以前の記事で紹介した時には、この方法は現在のブラウザで識別されないため、まだ使用すべきではないと説明しました。HTML 5.1では、この方法は仕様から完全に削除されています

現在、ドキュメントのアウトラインを作成するためには、ネストされたsection要素を使用することは同じですが、各セクションに適切な見出しレベルを組み合わせて使用​​します
上図のアウトラインを作成するためには、下記のマークアップを使用します。

header要素とfooter要素のネスト

HTML 5.0では、header要素はheader要素内にネストできず、footer要素はfooter要素内にネストできませんでした。

HTML 5.1では、このことが変更されました。わたし達はheader要素とfooter要素をネストすることができます、しかしそれができるのは子要素として配置したセクショニング要素の中のみです。セクショニング要素は、下記のいずれかです。

  • <article>
  • <section>
  • <aside>
  • <nav>

変更されたことにより、header要素とfooter要素は常にheader要素またはfooter要素だけでなく、section要素などのユニークなセクショニング要素に関連づけられます。

例えば、article要素はheader要素を持つことができます。このheader要素はさまざまなセクショニング要素の中にあり、このドキュメントに関する異なる情報を記述することができます。

このマークアップは、下図のアウトラインを生成します。

サイトのキャプチャ

期待するドキュメントのアウトライン

サイトのキャプチャ

Document Outlines in HTML 5.1

top of page

©2017 coliss