Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

<nav>

『nav』はWebサイトのナビゲーションリンクをまとめる意味的なブロック要素で、主要なナビゲーションメニュー・パンくずリスト・目次などに使用します。

構文

<!-- グローバルナビゲーション -->
<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about.html">会社概要</a></li>
    <li><a href="/contact.html">お問い合わせ</a></li>
  </ul>
</nav>

<!-- aria-labelで複数のnavを区別する -->
<nav aria-label="パンくずリスト">
  <a href="/">ホーム</a> > <a href="/products/">製品</a> > 詳細ページ
</nav>

主な属性

属性	概要
aria-label	ナビゲーションの目的をスクリーンリーダーに伝えます。1ページに複数の『nav』がある場合に「グローバルナビゲーション」「パンくず」などと区別できます。
id / class	CSSでスタイルを指定したり、JavaScriptで操作する際に使用します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    /* グローバルナビゲーションのスタイル */
    nav ul {
      list-style: none;
      display: flex;
      gap: 16px;
      padding: 0;
      margin: 0;
    }
    nav a {
      text-decoration: none;
      color: #333;
      padding: 8px 12px;
    }
    nav a:hover {
      background: #eee;
      border-radius: 4px;
    }

    /* パンくずリスト */
    .breadcrumb a {
      color: #666;
    }
  </style>
</head>
<body>

  <!-- グローバルナビゲーション -->
  <nav aria-label="グローバルナビゲーション">
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/tutorial.html">チュートリアル</a></li>
      <li><a href="/dictionary.html">辞典</a></li>
      <li><a href="/contact.html">お問い合わせ</a></li>
    </ul>
  </nav>

  <!-- パンくずリスト -->
  <nav class="breadcrumb" aria-label="パンくずリスト">
    <a href="/">ホーム</a> >
    <a href="/dictionary.html">辞典</a> >
    <span>HTML辞典</span>
  </nav>

  <!-- ページ内目次 -->
  <nav aria-label="目次">
    <ul>
      <li><a href="#section1">1. はじめに</a></li>
      <li><a href="#section2">2. 使い方</a></li>
      <li><a href="#section3">3. まとめ</a></li>
    </ul>
  </nav>

</body>
</html>

実行結果

グローバルナビゲーションがFlexboxで横並びのメニューとして表示されます。パンくずリストは「ホーム > 辞典 > HTML辞典」と表示されます。

[ホーム] [チュートリアル] [辞典] [お問い合わせ]

ホーム > 辞典 > HTML辞典

目次：
  ・ 1. はじめに
  ・ 2. 使い方
  ・ 3. まとめ

概要

『nav』はHTML5で導入されたセマンティック要素の一つです。スクリーンリーダーなどの支援技術はページ内の『nav』を認識し、ユーザーが直接ナビゲーションにジャンプできるようにします。視覚的なデザインだけでなく、アクセシビリティの向上にも貢献する重要な要素です。

すべてのリンクの集まりを『nav』で囲む必要はありません。主要なナビゲーションブロックにのみ使用するのが適切です。フッターの細かいリンク集・外部リンク一覧・単一のページ内リンクなどには必ずしも必要ではありません。使い分けの目安は「サイト構造を把握するために重要なナビゲーションかどうか」です。

1ページに複数の『nav』を設置する場合は、『aria-label』属性で各ナビゲーションの目的を明示することをおすすめします。こうすることでスクリーンリーダーのユーザーが「グローバルナビゲーション」「パンくず」「目次」と区別して利用できます。ナビゲーション内のリンクは『ul』と『li』を組み合わせてリスト構造にするのが一般的です。