<nav>
対応ブラウザ | Chrome 5~ / Firefox 4.0~ / Internet Explorer 9~ / Opera 11.10~ / Safari 4.1~ / Android 2.2~ / iOS 4.0~ | ||
---|---|---|---|
タグの分類 |
フロー・コンテンツ セクショニング・コンテンツ パルパブル・コンテンツ |
含められるもの | フロー・コンテンツで、子孫に<main>を持たないもの |
使える場所 | フロー・コンテンツを使える場所 | ||
用例 |
<nav role="navigation"> <ul> <li><a href="/">トップページ</a></li> <li><a href="company">会社概要</a></li> <li><a href="service">サービス</a></li> <li><a href="inquiry">お問い合わせ</a></li> </ul> </nav> |
<nav>とは
「nav」とは、ページ内リンクやほかのページヘのリンクなどの、ナビゲーション情報を表示するセクションのためのタグです。リンクすべてに<nav>を使う必要はなく、主要なリンクメニューの部分のみに使います。具体的には、常にヘッダーやサイドバーに配置されるグローバルナビゲーションやパンくずリスト、ページ送りのリンクメニューなどが該当します。
逆に、利用規約ページや著作権ページ、リンク集、「トップページへ戻る」などのリンクは<nav>を使用しなくともよく、<footer>のみで十分です。
なお、<nav>要素の内容はリストである必要はなく、主要なナビゲーションと言えるものでさえあれば、リンクを含んだ文章などであっても構いません。
<nav>はセクション要素であり、前後のコンテンツとは意味的に独立したものとなります。子孫に<main>を持つ要素を含めることはできません。
<nav>を使うことで、たとえば音声読み上げソフトがページ冒頭のナビゲーション部分をスキップしたり、逆にナビゲーション部分へスキップしたりといったことを行えるようになります。<nav>はWAI-ARIAにあるrole=navigationと同じ役割を持つとされていますが、音声読み上げソフトの<nav>への対応が十分なものとなるまでは、<nav role="navigation">のように両方を使うとよいでしょう。