nav要素
- カテゴリー：フローコンテンツ、セクショニングコンテンツ
- この要素が使える文脈：フローコンテンツが予想される場所
- コンテンツモデル：フローコンテンツ
nav要素は、「ナビゲーション」のセクションを表します。といっても、あらゆるa要素に手当たり次第に使用していいわけではなく、対象は「主要なナビゲーション」に限られています。
典型的なナビゲーションは以下のようにリストを使って記述されますが、nav要素内にリストが必須というわけではありません。文書に応じて適切な要素を記述しましょう。
nav要素のサンプル
<nav>
<ul>
<li><a href="/home/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/link/">Link</a></li>
</ul>
</nav>
最近では、大きなフッターにリスト状のナビゲーションを配置することがよくありますが、この場合はnav要素よりもfooter要素が適しています（文書によってはnav要素が適している場合もあり得ます）。
また、aside要素と同じく、nav要素に見出しが無い場合は、アウトラインにデフォルトの見出しが適用されます。デフォルトの見出しは、仕様書では「Navigation」となっていますが、環境によって異なる可能性があります。
検索フォームは「主要なナビゲーション」か？
nav要素は「主要なナビゲーション」を記述する要素です。では、サイト内検索などで設置される検索フォームは、nav要素でマークアップするべきでしょうか？
私（筆者）は、「答えは文脈による」と考えています。一口に検索フォームと言っても、サイトにおける位置付けはさまざまです。あるサイトではリストが主なナビゲーションで検索フォームはオマケ扱いかもしれませんし、あるサイトでは検索フォームがメインの遷移手段かもしれません。あるいは、Googleのような検索サイトでは、検索フォームはメインコンテンツと言えるかもしれません。
HTML5の他の要素でも言えることですが、どの要素を選ぶかは著者（制作者）の意図が重要になってきます。
body要素
- カテゴリー：セクショニングルート
- この要素が使える文脈：html要素の二つ目の要素
- コンテンツモデル：フローコンテンツ
body要素もセクションを明示する要素です。とはいっても、body要素はこれまでも特に意識することなく記述しているでしょうから、改めて説明する必要はないと思うかもしれません。
1つだけ注意したいのは、body要素の見出しです。body要素もセクションを明示する要素ですから、見出しが必要になります。忘れずに記述しましょう。
間違った例
<body>
<section>
<h1>サイトタイトル</h1>
<section>
<h2>ページタイトル</h2>
</section>
</section>
</body>
正しい例
<body>
<h1>サイトタイトル</h1>
<section>
<h2>ページタイトル</h2>
</section>
</body>
hgroup要素
- カテゴリー：フローコンテンツ、ヘッディングコンテンツ
- この要素が使える文脈：フローコンテンツが予想される場所
- コンテンツモデル：ひとつ以上のh1〜h6要素
hgroup要素は、セクションの見出しを表します。厳密にはセクションを明示する要素ではありませんが、アウトラインの判別に関わる要素なのでここで解説します。
hgroup要素は見出し要素をグループ化する要素で、hgroup内にはh1〜h6要素のみ含められます。アウトラインではhgroup要素内の見出し要素の中から、もっともレベルの高い要素だけが採用され、他の見出し要素はアウトラインに影響しません。
たとえば、次のようなテキストがあります。
スター・ウォーズ エピソード3 シスの復讐
スター・ウォーズ映画シリーズの最終作で...
このテキストをマークアップしたのが以下の2つの例です。
サンプル1
<h1>スター・ウォーズ エピソード3 シスの復讐</h1>
<p>スター・ウォーズ映画シリーズの最終作で...</p>
サンプル2
<h1>スター・ウォーズ エピソード3</h1>
<h2>シスの復讐</h2>
<p>スター・ウォーズ映画シリーズの最終作で...</p>
どちらも、マークアップ的には正解と言えます。しかし、アウトラインの判別の観点からすると、ソースコード2では問題が生じます。h2要素は、h1要素に対するサブタイトルですが、アウトライン・アルゴリズムにより、新たなセクションとして判別されてしまうのです。
つまり、p要素でマークアップしている「スター・ウォーズ映画シリーズの最終作で...」というテキストの見出しが、「シスの復讐」になってしまうのです。本来、「シスの復讐」は「スター・ウォーズ エピソード3」のサブタイトルなので、これでは意図している文脈と異なってしまいます。
この問題は、hgroup要素を使ってh1要素とh2要素を囲むことで解決できます。
<hgroup>
<h1>スター・ウォーズ エピソード3</h1>
<h2>シスの復讐</h2>
</hgroup>
<p>スター・ウォーズ映画シリーズの最終作で...</p>
h1要素とh2要素をhgroup要素で囲うことで、アウトライン上、「スター・ウォーズ映画シリーズの最終作で...」に対応する見出しは「スター・ウォーズ エピソード3」となり、本来の意図に沿ったマークアップになります。
