<nav>

対応:		HTML5（2014）

『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で操作する際に使用します。

サンプルコード

sample_nav.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</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>

実行結果

グローバルナビゲーションがリスト形式で表示されます。パンくずリストは「ホーム > 辞典 > HTML辞典」と表示されます。

サンプルページはこちら

パンくずリスト（構造化マークアップ付き）

パンくずリストは『nav』と『ol』で実装します。検索エンジン向けに構造化データ（schema.org）を合わせてマークアップすると、Google検索の結果にパンくずが表示されることがあります。

<style>
  .breadcrumb {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 4px;
    font-size: 0.875rem;
  }
  /* セパレーター（>）をCSSで追加 */
  .breadcrumb li + li::before {
    content: "›";
    margin-right: 4px;
    color: #999;
  }
  .breadcrumb a {
    color: #4a90e2;
    text-decoration: none;
  }
  .breadcrumb li:last-child {
    color: #666;
  }
</style>

<nav aria-label="パンくずリスト">
  <ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="/" itemprop="item"><span itemprop="name">ホーム</span></a>
      <meta itemprop="position" content="1">
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="/html/" itemprop="item"><span itemprop="name">HTML辞典</span></a>
      <meta itemprop="position" content="2">
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name">nav</span>
      <meta itemprop="position" content="3">
    </li>
  </ol>
</nav>

CSSでスタイリングする（横並びナビ）

グローバルナビゲーションをCSSで横並びにするのが典型的な実装です。

<style>
  /* グローバルナビゲーションの横並び */
  .global-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #333;
  }
  .global-nav a {
    display: block;
    padding: 14px 20px;
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s;
  }
  .global-nav a:hover {
    background: #555;
  }
  /* 現在のページ */
  .global-nav a[aria-current="page"] {
    background: #4a90e2;
    pointer-events: none;
  }

  /* レスポンシブ: 768px以下は縦並びに */
  @media (max-width: 768px) {
    .global-nav ul {
      flex-direction: column;
    }
  }
</style>

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

概要

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

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

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