<nav>タグは、グローバルナビゲーションと呼ばれる、主要なナビゲーションに使用するタグです。サイト内で移動するリンクや、サイト外に移動するリンクなどのメニュー等のものの中でも、主要なナビゲーションのみに使用します。
今回は、HTML5における<nav>タグの使い方をご紹介します。
HTML5における<nav>タグの使い方
<nav>タグの使い方は、ナビゲーションを以下のタグで囲んで使用します。
1 |
<nav>〜</nav> |
すべてのナビゲーションを、<nav>要素で囲めばいいという訳ではなく、サイトのメインであるグローバルナビゲーションに分類されるナビゲーションのみを囲んで使用します。以下はサンプルコードです。
1 2 3 4 5 6 7 |
<nav> <ul> <li>トップページ</li> <li>子ページ</li> <li>子ページ</li> </ul> </nav> |
また見出し要素などを使用した、ナビゲーションのタイトルなどがある場合も、ナビゲーションの一部なので、まとめて<nav>タグで囲んでしまいます。
1 2 3 4 5 6 7 8 |
<nav> <h2>主要ナビゲーションです。</h2> <ul> <li>トップページ</li> <li>子ページ</li> <li>子ページ</li> </ul> </nav> |
<footer>などでよく見かける、利用規約やトップページへのリンク等のナビゲーションでは、<nav>要素を利用する必要がありません。主要なナビゲーションにのみ使用する要素として覚えておきましょう。