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

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

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

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

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

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

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

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


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

購読

平日・週2回更新