定義と使い方

<nav>タグは
他のウェブページへ遷移する、または現在のウェブページ内のコンテンツへ移動するためのナビゲーション（navigation）リンク（links）が配置される領域を表します。一般的な例としてはメニューや目次、索引などがあります。

基本例

HTML 
<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>navタグ例</title>
    </head>
    <body>
        <header>
            <h1>ウェブページタイトル</h1>
        </header>
        <nav>
            <ul>
                <li><a href="/">ホーム</a></li>
                <li><a href="/about">会社情報</a></li>
                <li><a href="/services">サービス</a></li>
                <li><a href="/contact">連絡先</a></li>
            </ul>
        </nav>
        <main>
            <article>
                <h2>主要コンテンツタイトル</h2>
                <p>主要内容...</p>
            </article>
        </main>
        <aside>
            <h3>付加情報</h3>
            <p>このページの主要内容の一部です。</p>
        </aside>
        <footer>
            <p>©copyrightウェブページ</p>
        </footer>
    </body>
</html>

特徴

ページ内のすべてのリンクグループを<nav>タグに含める必要はありません。このタグは主に主要なナビゲーションブロックで構成される領域を示すためのものです。
特に<footer>タグには利用規約やホームページ、著作権ページなどサイト内の各種ページへの短いリンク一覧が配置されることが一般的です。このような場合は<footer>タグだけで十分です。<nav>タグを使用することもできますが通常は必要ありません。

<nav>タグは主に主要なナビゲーションブロックで構成される領域のためのものです。

次の例ではページ内に複数のリンク箇所がありますが、そのうちナビゲーション領域と見なされるのは一つだけです。

HTML 
<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>navタグ例</title>
    </head>
    <body>
        <header>
            <h1>ウェブページタイトル</h1>
            <p> <!-- このリンクグループは補助的な参照リンクであり、サイトの主要なナビゲーション領域とは見なされません。 -->
                <a href="news.html">ニュース</a> -
                <a href="blog.html">ブログ</a> -
                <a href="forums.html">フォーラム</a>
            </p>
            <p>最終更新：<span>2025-04-01</span></p>
            <nav> <!-- 主要なナビゲーション領域と見なされます。 -->
                <ul>
                    <li><a href="/">ホーム</a></li>
                    <li><a href="/about">会社情報</a></li>
                    <li><a href="/services">サービス</a></li>
                    <li><a href="/contact">連絡先</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <article>
                <h2>主要コンテンツタイトル</h2>
                <p>主要内容...</p>
            </article>
        </main>
        <aside>
            <h3>付加情報</h3>
            <p>このページの主要内容の一部です。</p>
        </aside>
        <footer>
            <p>©copyrightウェブページ</p>
        </footer>
    </body>
</html>

例

<nav>タグの多様な使用例の一部を見ていきましょう。

主要ナビゲーションメニュー

最も一般的な使用例は、ウェブサイトの主要ナビゲーションメニューを<nav>タグで囲むことです。このメニューには、ウェブサイトの主要なセクションやページへ移動するリンクが含まれます。

HTML 
<nav>
    <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/about">会社情報</a></li>
        <li><a href="/services">サービス</a></li>
        <li><a href="/contact">連絡先</a></li>
    </ul>
</nav>

ページ内ナビゲーションメニュー

ページ内で補助的なナビゲーションメニューを定義することもできます。このメニューは、ページ内でより詳細なナビゲーションを提供する際に使用されます。例えば、ブログページでカテゴリーやタグによって投稿を絞り込むメニューが考えられます。

HTML 
<nav>
    <ul>
        <li><a href="#all">全て</a></li>
        <li><a href="#tech">技術</a></li>
        <li><a href="#lifestyle">ライフスタイル</a></li>
        <li><a href="#travel">旅行</a></li>
    </ul>
</nav>

<!-- ブログコンテンツ -->
<section id="all">
    <!-- 全カテゴリーの投稿 -->
</section>
<section id="tech">
    <!-- 技術カテゴリーの投稿 -->
</section>
<section id="lifestyle">
    <!-- ライフスタイルカテゴリーの投稿 -->
</section>
<section id="travel">
    <!-- 旅行カテゴリーの投稿 -->
</section>

上の例では、ブログのカテゴリーをフィルタリングし、該当カテゴリーまでスクロールして関連する投稿を確認できるようにしています。各リンクはページ内の特定の位置に移動するように構成されており、id属性とhref属性を組み合わせて該当位置を定義しリンクしています。

Breadcrumbs

Breadcrumbsは、ユーザーに現在のページの位置を視覚的に示し、前のページへ移動する際に使用されます。

HTML 
<nav>
    <ol>
        <li><a href="/">ホーム</a></li>
        <li><a href="/products">製品</a></li>
        <li><a href="/products/category1">カテゴリー1</a></li>
        <li aria-current="page">現在のページ</li>
    </ol>
</nav>

上の例では、Breadcrumbsを使用することで、ユーザーは現在のページが「ホーム > 製品 > カテゴリー1 > 現在のページ」であることを理解でき、各部分をクリックして該当ページに移動することができます。

Pagination

Paginationは、ウェブページのコンテンツを複数のページに分割し、各ページへ移動できるナビゲーションシステムを指します。特に掲示板などでよく使用されます。

HTML 
<nav>
    <ul>
        <li><a href="/page/1">前へ</a></li>
        <li><a href="/page/2">2</a></li>
        <li><a href="/page/3">3</a></li>
        <li><a href="/page/4">4</a></li>
        <li><a href="/page/5">5</a></li>
        <li><a href="/page/6">次へ</a></li>
    </ul>
</nav>

簡単なウェブページナビゲーション

この例では、<nav>タグ内にリストではなく、個別のテキストリンクが含まれています。<nav>タグはリストを含める必要はなく、他の種類のコンテンツも含めることができます。

HTML 
<nav>
    <h2>ナビゲーション</h2>
    <p>
        あなたは私のホームページにいます。
        北には<a href="/blog">私のブログ</a>があり、
        戦いの音が聞こえます。東に行くと大きな山が見え、
        そこには<a href="/school">学校の課題</a>がたくさん散らばっています。
        この山の上には私に似た小さな人物が、
        必死に<a href="/school/thesis">論文</a>を書いているように見えます。
    </p>
    <p>
        西に行くと複数の出口があります。
        遊び心がありそうな出口には「ゲーム」と書かれています。
        もう一方のあまり楽しそうでない出口には「ISP」と書かれています。
    </p>
    <p>
        南には暗く静かな<a href="/about">連絡先ページ</a>があります。
        その入り口には蜘蛛の巣がかかっており、
        ある瞬間、ネズミが素早くページの外に飛び出すのを見ることができます。
    </p>
</nav>

アクセシビリティに関する考慮事項

HTMLにおける「ランドマーク（landmark）」とは、ウェブページの構造を示し、ウェブアクセシビリティを向上させるために使用される特別な役割を持つ要素です。ウェブページを理解し、ナビゲートするのに役立ち、スクリーンリーダーやその他の支援技術を使用するユーザーにページのレイアウトや構造を伝える重要な役割を果たします。

ランドマーク（landmark）については、ARIA Landmarks Exampleを参照してください。

<nav>タグはページの主要なナビゲーション領域を示します。role属性の値はnavigationです。

このように、<nav>タグはウェブページにおいて、ページのレイアウトや構造を伝える上で重要な意味を持ちます。

role属性で<nav>タグの意味を付与する

もし<nav>を使用できない場合は、role属性を使って同じ意味を付与することもできます。

次は、<nav>タグを使用せず、特別な意味を持たない<div> タグを用いてランドマークとして利用する例です。

HTML 
<div role="navigation">
    <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/about">会社情報</a></li>
        <li><a href="/services">サービス</a></li>
        <li><a href="/contact">連絡先</a></li>
    </ul>
</div>

ブラウザの互換性の問題で<nav>タグを使用できない場合を除き、role="navigation"を使用するよりも<nav>タグを使用してください。

注意点

<nav>は<address>の子要素になることはできません。

  • <address>は、文書全体または祖先の<article> の連絡先情報を表すために存在します。
  • 例えば、著者名、メールアドレス、会社住所、電話番号、ウェブサイトのリンクなどの「連絡手段」が含まれます。
  • 一方、<nav>は、文書やページ内の主要なナビゲーションリンクの集合を定義する要素です。
  • つまり、ナビゲーションは連絡先情報とは無関係であり、<address>の本来の意味を曖昧にしてしまうため、配置できないように制限されています。
  • そのため、仕様では<address>のコンテンツとして<nav>や、<article> 、<aside>、<section>、<header>、<footer>などのセクショニングコンテンツ（sectioning content）を含めることは許可されていません。

関連属性

<nav>専用の属性はありません。すべてのグローバル属性を使用できます。

技術的な文法のまとめ

navタグの技術的な文法のまとめ
使用可能な親要素 <address>の子要素になることはできません。
暗黙的なrole属性の値 navigation
許可されているrole属性の値 なし

ブラウザ互換性

navタグのブラウザ互換性
タグ
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
<nav> 5 12 4 5

仕様書

navタグの仕様書
仕様書
<nav> HTML Standard
#the-nav-element

参考資料

関連項目