重要: ウェブブラウザーや支援技術の中で、提案されているアウトラインアルゴリズムを実装したものはありません。これは最終的な W3C の仕様書に含まれていません。したがって、アウトラインアルゴリズムを、ユーザーに文書の構造を伝えるために使用するべきではありません。作者には、見出しの順位 (h1-h6) を使用して文書の構造を伝えることを推奨します。
HTML5 仕様には、ドキュメントの構造化に役立ついくつかのセマンティック要素が含まれています。セマンティック要素は特に、ブラウザ、開発者、リーダー及び文書を解釈するその他のテクノロジ (例: 音声アシスタント) に意味を伝えるように設計されています。
例えば、<div> はそのコンテンツについて何の意味も含みませんが、<figcaption> はコンテンツを明確に説明します。
新しいセマンティック要素が HTML5 に追加され、Web サイトのセクションニングが改善されました。開発者にとって重要なのは、これらのセマンティック要素を望ましい目的以外で使用しないことです。多くのアクセシビリティツールは、セマンティック HTML5 要素に依存しています。
HTML5 のセクション要素
- HTML ナビゲーション要素 (
<nav>) は、サイトに頻繁に表示されるナビゲーションリンクを含むセクションを定義します。主要なメニューと従属的なメニューを持つことができますが、ネストしたり、<nav>要素内に<nav>要素を配置したりすることはできません。 - HTML アーティクル要素 (
<article>) は、一つの自己完結型のコンテンツを定義します。メインコンテンツのみを指すわけではなく、コメントやウィジェットに使用できます。 - HTML セクション要素 (
<section>) は、セマンティックな意味について関連するグループピングを示すための、ドキュメントのセクションを定義します。親要素から追加のコンテキストを提供されたセクション要素を使用することは合理的です。 - HTML アサイド要素 (
<aside>) は、説明ボックスや広告のように、 メインの要素に関連してはいるがメインのフローに属さないセクションを定義します。自身のアウトラインがありますが、メインのアウトラインには属しません。
セクショニングに使用される他のセマンティック HTML 要素
- HTML ボディ要素 (
<body>) は、ドキュメントのすべてのコンテンツを定義します。要素には、すべてのコンテンツと HTML タグが含まれています。 - HTML ヘッダー要素 (
<header>) は、一般にロゴ、タイトル及びナビゲーションを含むページを定義します。ヘッダーは、<article>又は<section>などの他のセマンティック要素の中で使用できます — もしくはセクションの見出し及び作成者名などを含むかもしれないセクションヘッダーなどで使用できます。<article>、<section>、<aside>、及び<nav>は、自身の<section>を持つことができます。名前にもかかわらず、必ずしもページ又はセクションの先頭に配置されるとは限りません。 - HTML フッター要素 (
<footer>) は、一般に著作権、法律上の注意、場合によってはいくつかのリンクを含むページフッター — もしくはセクションの発行日、ライセンス情報などが含まれるかもしれないセクションフッターなどを定義します。<article>、<section>、<aside>、又は<nav>は、自身のの<footer>を持つことができます。名前にもかかわらず、必ずしもページまたはセクションの最後に配置されるとは限りません。
セクションの要素はどのように機能する？
<body>
<header>
<nav>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</nav>
<h1>
Page Title
</h1>
</header>
<section>
<h2>
My Blog Posts
</h2>
<article>
<header>
<p>
Article Title
</p>
</header>
<p>
content
</p>
</article>
<article>
<header>
<p>
Article Title
</p>
</header>
<p>
content
</p>
</article>
<aside>
<p>
Author info
</p>
</aside>
</section>
<footer>
Copyright Info
</footer>
</body>
ナビ要素
<nav> はナビゲーション・ブロックを示し、主要なナビゲーションメニューに使用されるべきです。
<nav>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</nav>
ネストしたメニュー
<nav> 要素はネストしません。<nav> には、主要なメニューと従属的なメニューの両方を含めることができます。
<nav>
<ul>
<li><a href="#">primary link</a></li>
<li>
<a href="#">primary link</a>
<ul>
<li><a href="#">secondary link</a></li>
<li><a href="#">secondary link</a></li>
</ul>
</li>
<li><a href="#">primary link</a></li>
</ul>
</nav>
リンク集
<nav> 要素は、サイトのナビゲーションメニューにのみ使用します。ソーシャルメディアのプロフィール又はブログロールなどのリンク集は、<nav> 要素で囲むべきではありません。
<nav> 内の HTML 要素
リスト要素はナビゲーションには一般的ですが、必須というわけではありません。<p> などの他の要素を使用できます。
アーティクル要素
<article> 要素は自己完結型のコンテンツを示します。つまり、<article> 要素を除く他のすべての HTML を削除しても、そのコンテンツは読者にとって意味を持ちます。
<article> <h1>How to Become an MDN Contributor</h1> <p> Do you want to help protect the web?.... </p> </article>
アーティクル内のネストした要素
<article> 要素はヘッダー、アサイド及びフッターなどの他のセマンティック要素を持つことができます。これは、要素のクラスプロパティにCSSセレクタを追加してドキュメントのスタイルを設定する場合に便利です。
<article>
<header>
<h1>How to Become an MDN Contributor</h1>
</header>
<p>
Do you want to help protect the web?....
</p>
<aside>
<blockquote>
Amazing quote from article
</blockquote>
</aside>
<footer>
<p>
Author info, publication date
</p>
</footer>
</article>
ネストしたアーティクルとセクション
アーティクルはセクション内にネストでき、セクションはアーティクル内にネストできます。たとえば、本は関連する記事を含むセクションに分割しても良いです。これらの各記事には、関連情報のセクションを含めることができます。
<section>
<h1>Getting Involved</h1>
<article>
<header>
<h2>How to Become an MDN Contributor</h2>
<p>Do you want to help protect the web?....</p>
</header>
<section>
<h3>Steps to Editing an Article</h3>
</section>
<footer>
<p>Author info</p>
<p>publication date</p>
</footer>
</article>
</section>
セクション要素
セクション要素は、テーマ沿ったコンテンツのグルーピングのために使用されます。W3C の仕様ふまえ、通常はセクションには見出しを含めるべきです。見出しに <header> 要素の使用が必須というわけではありません。
<section>
<h1>Amazing MDN Contributors</h1>
<ul>
<li><img src="link" alt="descriptive text"></li>
<li><img src="link" alt="descriptive text"></li>
<li><img src="link" alt="descriptive text"></li>
</ul>
</section>
アサイド要素
<aside> 要素は、メインコンテンツとは配置が異なる関連コンテンツを定義します。しばしばコールアウト、引用ブロック、及び定義に使用されます。<aside> 要素は、追加だが関連性のある情報を含む補足によく使用されます。
<section>
<h1>Amazing MDN Contributors</h1>
<ul>
<li><img src="link" alt="descriptive text"></li>
<li><img src="link" alt="descriptive text"></li>
<li><img src="link" alt="descriptive text"></li>
</ul>
<aside>
<p>To get involved contact</p>
</aside>
</section>
アサイド要素のネスト
<aside> 要素は、他のセクション HTML 要素の内部にネストできます。<aside> の内部に <aside> をネストすることはできません。コールアウトボックスの中にコールアウトボックスを持たないということを意味します。
HTML5 非対応ブラウザーでの HTML5 要素の利用
セクションと見出しの要素は、いくつかの手順を踏むことで多くの HTML5 非対応ブラウザーでも動作させることができます。オーディエンスの特定の対象が Internet Explorer 8 以前を使用している場合、以下の手順に従うと期待通りに動作させることができます。ただし、グローバルではこれらのブラウザーの使用はとても少なくなったので、そのような場面はわずかです。
HTML5 のセマンティック要素は特別な DOM インターフェイスを必要としませんが、これらに明示的に対応していない古いブラウザーは、特定の CSS スタイルが必要です。未知の要素は既定で display:inline としてスタイル付けされるため、これらには display: block と設定したいところです。
article, aside, footer, header, nav, section {
display:block;
}
もちろんウェブ開発者はそれらに異なるスタイルを指定できますが、 HTML5 非対応ブラウザーでは、そのような要素のための既定のスタイル指定が意図通りにはならないことを忘れないでください。 <time> 要素が含まれていないのは、 HTML5 非対応ブラウザーのそれに対する既定のスタイル指定が、 HTML5 対応ブラウザーにおけるスタイル指定と同じだからということにも注意してください。
さらに、より古いバージョンの IE では、 DOM のインスタンスを生成しない限り、対応していない要素のスタイル指定ができません。以下のように、特定のスクリプトを追加することで実現することができます。
<!--[if lt IE 9]>
<script>
document.createElement("article");
document.createElement("aside");
document.createElement("footer");
document.createElement("header");
document.createElement("nav");
document.createElement("section");
document.createElement("time");
</script>
<![endif]-->
最後の予防措置として、 <head> 要素内に明示的に <noscript> 要素を追加して、 JavaScript を無効にしたユーザーに対して、このページが JavaScript に依存していることを警告することができます。
<noscript>
<p><strong>このウェブページは JavaScript を有効にする必要があります。</strong></p>
<p>JavaScript はオブジェクト指向のコンピュータープログラミング言語で、
ウェブブラウザー内で対話的な効果を生成するためによく使われます。</p>
<p><a href="https://goo.gl/koeeaJ">JavaScript を有効化する方法</a></p>
</noscript>
まとめると、 Internet Explorer (バージョン 8 以下) を含め、また、それらのブラウザーがスクリプトを利用しないように設定されていても正しく表示を代替する、 HTML5 非対応ブラウザー向けの HTML5 のセクショニングおよび見出し要素の対応を可能にするコードは以下になります。:
<!--[if lt IE 9]>
<script>
document.createElement("article");
document.createElement("aside");
document.createElement("footer");
document.createElement("header");
document.createElement("nav");
document.createElement("section");
document.createElement("time");
</script>
<![endif]-->
<noscript>
<p><strong>このウェブページは JavaScript を有効にする必要があります。</strong></p>
<p>JavaScript はオブジェクト指向のコンピュータープログラミング言語で、
ウェブブラウザー内で対話的な効果を生成するためによく使われます。</p>
<p><a href="https://goo.gl/koeeaJ">JavaScript を有効化する方法</a></p>
</noscript>
メモ: このコードは HTML validator でエラーを発生させます。これは必ずしも本当に悪いことだとは言えません — サイトには若干のバリデーションエラーがあるものです — が、気を付けなければなりません。
まとめ
HTML5 で導入された新しいセクションおよび見出し要素はウェブ文書の構造とアウトラインを標準の方法で表現できるようにします。それらは HTML5 ブラウザーを持ち、ページを理解することを助けるための構造を必要とする人々、例えば、いくつかの支援技術の助けを必要とする人々に大きな利点をもたらします。これらの新しいセマンティック要素は単純に利用でき、負担は非常に少なく. HTML5 非対応ブラウザーでも動作するようにできます。それゆえ、それらを制限なく利用すべきです。