HTML5における<nav>タグの使い方

<nav>タグは、グローバルナビゲーションと呼ばれる、主要なナビゲーションに使用するタグです。サイト内で移動するリンクや、サイト外に移動するリンクなどのメニュー等のものの中でも、主要なナビゲーションのみに使用します。

今回は、HTML5における<nav>タグの使い方をご紹介します。

HTML5における<nav>タグの使い方

<nav>タグの使い方は、ナビゲーションを以下のタグで囲んで使用します。

<nav>〜</nav>

すべてのナビゲーションを、<nav>要素で囲めばいいという訳ではなく、サイトのメインであるグローバルナビゲーションに分類されるナビゲーションのみを囲んで使用します。以下はサンプルコードです。

<nav>
<ul>
  <li>トップページ</li>
  <li>子ページ</li>
  <li>子ページ</li>
</ul>
</nav>

また見出し要素などを使用した、ナビゲーションのタイトルなどがある場合も、ナビゲーションの一部なので、まとめて<nav>タグで囲んでしまいます。

<nav>
<h2>主要ナビゲーションです。</h2>
<ul>
  <li>トップページ</li>
  <li>子ページ</li>
  <li>子ページ</li>
</ul>
</nav>

<footer>などでよく見かける、利用規約やトップページへのリンク等のナビゲーションでは、<nav>要素を利用する必要がありません。主要なナビゲーションにのみ使用する要素として覚えておきましょう。


イベント

2017/12/05(火)
Design Thinking Square