HTML 5.1で変更されたsection要素の使い方、header要素とfooter要素のネストについて解説
Post on:2016年12月13日
sponsors
2016年11月1日に、HTML 5.1が勧告されました。HTML 5から新しく加えられた点、削除された点、変更された点がいろいろあります。
その中から、ページのアウトラインを組み立てる上で重要なsection要素の使い方、header要素とfooter要素のネストについて具体的な事例を添えて紹介します。
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
私は以前、HTMLのページにvalidなアウトラインを持つ重要性について説明しました。
HTMLのページで、ドキュメントのアウトラインはページ上のコンテンツの構造を明示します。これはブラウザに有用で、アウトラインを使用してドキュメントの目次などを作成することができます。また、スクリーンリーダで、ページの操作性を向上させることもできます。
Using Heading Elements to Create a Document Outline
先日、HTML 5.1が公式にリリースされました。
興味深い変更が数多くあり、そのうちの2つはvalidなアウトラインに関係しています。
- 削除
- アウトラインを作成するh1要素を入れ、ネストされたsection要素の使用。
- 変更
- header要素とfooter要素がセクショニング要素内にある場合、ネストすることが可能。
ネストされたsection要素を含むアウトラインの作成方法
HTML 5.0で、ドキュメントのアウトラインを作成する新しい方法が提起されました。見出しのレベルにはh1要素だけを使用する代わりに、アウトラインの構造はsection要素をネストして定義するものです。
マークアップを見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<section> <h1>Heading Level One</h1> <section> <h1>Heading Level Two</h1> </section> <section> <h1>Heading Level Two</h1> <section> <h1>Heading Level Three</h1> </section> </section> <section> |
このマークアップで、下記のようなドキュメントのアウトラインを期待していました。
期待するドキュメントのアウトライン
以前の記事で紹介した時には、この方法は現在のブラウザで識別されないため、まだ使用すべきではないと説明しました。HTML 5.1では、この方法は仕様から完全に削除されています。
現在、ドキュメントのアウトラインを作成するためには、ネストされたsection要素を使用することは同じですが、各セクションに適切な見出しレベルを組み合わせて使用します。
上図のアウトラインを作成するためには、下記のマークアップを使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<section> <h1>Heading Level One</h1> <section> <h2>Heading Level Two</h2> </section> <section> <h2>Heading Level Two</h2> <section> <h3>Heading Level Three</h3> </section> </section> <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要素はさまざまなセクショニング要素の中にあり、このドキュメントに関する異なる情報を記述することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<article> <header> <h1>Creating a Document Outline in HTML 5.1</h1> <section> <header> <h2>The Author</h2> </header> <p>Ire Aderinokun</p> <address>Lorem ipsum dolor sit amet</address> </section> <section> <header> <h2>The Publication</h2> </header> <p>bitsofcode</p> <address>Lorem ipsum dolor sit amet</address> </section> </header> <h2>Introduction</h2> <p>Lorem ipsum dolor sit amet</p> </article> |
このマークアップは、下図のアウトラインを生成します。
期待するドキュメントのアウトライン
sponsors
