HTML5から導入されたnav要素（タグ：<nav>）ですが、navが何を意味するのかをご存知ですか？
nav要素の使い方は、Web技術の標準化を推進するW3Cのサイトに掲載されています。
しかし、曖昧に書かれており、どう解釈すればよいのかは、サイト制作者に委ねられています。
以下で、僕がW3Cのサイトより解釈したnavの使い方を書いています。参考になれば幸いです。
目次
Web技術の標準化を推進するW3Cによれば、nav要素の概念は、次のようになります。
セクショニング・コンテンツに属し、ナビゲーション・リンク（他のページや”ページ内の一部”へ飛ばすリンク）のセクションを表します。
つまり、ナビゲーションのセクションであることを表すために、<nav>でマークアップします。
ちなみに、セクショニング・コンテンツの説明を下に書きますが、「nav要素は、セクショニング・コンテンツに含めるべきではない」と思うのは僕だけでしょうか。
HTMLにあるコンテンツ・モデルのカテゴリーの1つで、Webサイト内の構造上のセクション（節、章、大きな段落など）であることを表します。
通常、セクショニング・コンテンツには、セクションの内容を示す『見出し（<h1>など）』をつけ、見出しの内容の範囲が１つのセクションになります。
また、W3Cは、navに関して、以下のようなことも指摘しています。
- nav要素の内容が、項目リストを表す場合は、li要素（<li>）を使う。（※li要素以外をnav要素で囲むことも可能）
- ページ内で、何度も使用可能だが、主に、重要なナビゲーションに対して設定する。
- すべてのリンク群をnav要素で囲むわけでない。
- footer要素内のナビゲーションに、使う必要はない。
- nav要素は、ユーザーエージェント（スクリーンリーダーなど）で利用できる。
nav要素などのセクショニング・コンテンツは、Webサイトの構造を適正化し、ユーザーエージェント（ブラウザやスクリーン・リーダーなど）の読み込みを正しくさせるためにあります。
つまり、ナビゲーションをnavタグで囲むようことによって、ブラウザやユーザーエージェントに、ナビゲーション・コンテンツの位置を知らせます。
決して、レイアウトを整え、表示を適正化させるものではありません。
このため、navを導入しなくても、表示上の問題は発生しないので、無理に導入する必要はありません。
しかし、構造を適正化したWebサイトは、将来的にブラウザによる評価を上げる可能性があります。
Webページにおいて、重要なのは、メインコンテンツ（記事など）。それ以外は、補助的なコンテンツでしかありません。
ページ内のそれぞれの役割をハッキリさせることは、非常に重要です。
nav要素は、セクショニング・コンテンツ要素なので、nav要素の内容を示す『見出し』が必要になります。
ですが、僕は無くても問題ないと思っています。
理由は、『w3c markup validator』でチェックしても、エラーにはならないからです。
HTMLの構文チェックができる”W3CのWebサービス”のこと。
しかし、実際のところ、nav要素における「見出しの省略」は賛否両論なので、サイト制作者しだい。
nav要素の導入の方法は、非常に簡単。
『重要なナビゲーションを探し、それを<nav></nav>で囲む』だけ。
通常、次のようにナビゲーションをdiv要素で囲っていると思います。
<div id="navi"> <ul> <li>ホーム</li> <li>ラーメン</li> <li>素麺</li> <li>うどん</li> <li>そば</li> </ul> </div>
このdiv要素をnav要素に変更します。
<nav id="navi"> <ul> <li>ホーム</li> <li>ラーメン</li> <li>素麺</li> <li>うどん</li> <li>そば</li> </ul> </nav>
ポイントは、ナビゲーションのセクションをnav要素で囲むこと。余計なものまで、囲まないでください。
何を「重要なナビゲーション」と考えればよいのか
重要なナビゲーションといえば、一般的に以下のようなものが該当すると思います。
| ナビ名 | 内容 |
|---|---|
| グローバル・ナビ | Webサイトの全てのページに共通して設置された案内リンク。 |
| ローカル・ナビ | 固定ページや投稿ページ、カテゴリーページごとの設置された案内リンク。通常、サイドバー上部に設置。 |
| ユーティリティ ・ナビ |
トップページやサイトマップ、運営者紹介などのサイトの利便性を高めために設置された案内リンク。通常、ヘッダー右上に設置。 |
| パンくず・リスト | ユーザーがサイト内の階層上、どの位置にいるのかを分かりやすくするために設置されたリンク群。 |
グローバル・ナビをnav要素で囲むことは当然として、他にも、ローカル・ナビ、ユーティリティナビ、パンくず・リストも重要なナビゲーションになります。
特に、パンくず・リストは、忘れやすい箇所。W3Cにおいて、リンク付きのパンくず・リストは、nav要素で囲むことを推奨しています。
これら以外にも、目次やページネーション（「前へ」「次へ」のボタン）など、サイト製作者が重要なナビゲーションと判断すれば、それもnav要素で囲んでください。
関連記事やカテゴリーはどうする？
関連記事や新着記事、人気記事、カテゴリーも、リンク・ナビゲーションといえます。
これもnav要素で囲むべきでしょうか。
たとえばnav要素で囲むとすれば、関連記事の場合、次のようになります。
<nav id="related-entries"> <h3>関連記事</h3> <ul> <li>天使の羽</li> <li>祖父さんのメガネ</li> <li>ソバージュとジネンジュ</li> </ul> </nav>
これでも、良いように思いますが、僕は、aside要素とsection要素を使った方が良いと思います。
僕の独断と偏見によれば、div要素内に「見出し」を設置する場合、それはナビゲーションではなく、１つの意味と内容をもったカタマリだと思っています。なので、nav要素ではなく、section要素で囲む方が良いように思いました。
僕なら、記事下に次のように『aside要素（<aside>）』を設け、その中に関連記事や新着記事、広告欄を入れます。
<aside> <section id="related-entries"> <h3>関連記事</h3> <ul> <li>天使の羽</li> <li>祖父さんのメガネ</li> <li>ソバージュとジネンジュ</li> </ul> </section> <div> 広告 </div> <section id="new-entries"> <h3>新着記事</h3> <ul> <li>ゴリラとゲリラ</li> <li>記憶力と記憶術</li> <li>ソバージュとジネンジュ</li> </ul> </section> </aside>
関連記事や新着記事など、見出しをつけるものにはsection要素（<section>）、広告欄などの見出しがないものは、div要素（<div>）で囲みます。
このようにすれば、構造はスッキリし、メインコンテンツとの間に明確な線引きができます。
ちなみに、サイドバーやフッターも同様に、それぞれのsection要素をaside要素で囲みます。
最後に
以上が、僕がW3Cのサイトから解釈した「nav要素の使い方」になります。
Webサイトには、ブログやポータルサイトなど、様々なタイプがあります。また、サイト制作者ごとに、重要なナビゲーション・リンクかどうかの判断も異なります。
自由かつ柔軟な考えを持って、nav要素を導入してみてくださいね。