この記事の要点

使い所: グローバルナビ / パンくず / 目次 (TOC) / ページネーション フッターの利用規約リンクなどすべてのリンクを nav で囲む必要はない — 主要なものに限定 複数の nav を置く場合は aria-label または aria-labelledby で役割を区別する スクリーンリーダーは nav をランドマークとして読み上げ、利用者は領域単位でジャンプできる — アクセシビリティ向上 関連: セクション要素 / header 要素

nav 要素とは

nav 要素は HTML5 で追加されたセマンティック要素で、ナビゲーションリンクを含むセクションであることを明示します。グローバルナビゲーション、サイドメニュー、パンくず、目次、ページネーションなど「ユーザーを別ページ・別セクションに案内するためのリンク群」を囲むために使います。

div で囲んでも見た目は同じですが、nav にすることでブラウザ・スクリーンリーダー・検索エンジンが「ここはナビ領域」と認識し、アクセシビリティと SEO の両面で意味を持ちます。

基本構文

<nav>
  <ul>
    <li><a href="/">トップ</a></li>
    <li><a href="/about">サービス紹介</a></li>
    <li><a href="/blog">ブログ</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

典型的にはリストでマークアップし、CSS で横並びやドロワーに整形します。

主な利用パターン

パターン	説明	aria-label の例
グローバルナビ	サイト全体のメインメニュー	"global"
パンくず (breadcrumb)	現在地までの階層リンク	"breadcrumb"
サイドナビ	カテゴリ別の下層リンク	"sidebar"
目次 (TOC)	長文記事の見出し一覧	"toc"
ページネーション	1, 2, 3, ... のページ送り	"pagination"
フッターナビ	フッター内のメインリンク	"footer"

複数の nav を区別する

1 ページに nav が複数あるとスクリーンリーダーが「nav, nav, nav...」と読んでしまい区別できません。aria-label または aria-labelledby で役割を明示しましょう。

<nav aria-label="global">
  <ul><li><a href="/">Home</a></li>...</ul>
</nav>

<nav aria-label="breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/category">Category</a></li>
    <li aria-current="page">Current</li>
  </ol>
</nav>

nav を使うべきでない例

• フッターのコピーライト・利用規約・プライバシーリンクだけのまとまり — 主要ナビではないので不要
• 記事本文中の「関連リンク」 — aside の方が適切な場合が多い
• ロゴをトップに戻すための単一リンク — nav で囲む必要なし
• ソーシャルアイコン群 — ul + aside / div で十分

WHATWG 仕様は「主要 (major) なナビゲーションブロックのみ」と明記しています。すべてのリンク集合に nav をつける必要はありません。

パンくずでの典型実装

<nav aria-label="breadcrumb">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/"><span itemprop="name">Home</span></a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/category"><span itemprop="name">Category</span></a>
      <meta itemprop="position" content="2" />
    </li>
  </ol>
</nav>

Schema.org の BreadcrumbList を付与すると、Google の検索結果にパンくずが表示されやすくなります。

アクセシビリティ上のメリット

• スクリーンリーダーは nav をランドマークとして扱い、利用者が領域単位でジャンプ可能
• JAWS / NVDA の「ナビゲーションリンク一覧」コマンドで nav 内のリンクだけ抽出できる
• キーボード利用者にも領域の切り替えが伝わる

SEO の観点

Google は HTML5 セマンティック要素を解析に利用しており、nav 内のリンクは「ナビゲーション系」と認識されます。直接の順位ブーストは公表されていませんが、構造化されたページはクロール効率・ユーザー行動指標の両面で有利と考えられます。

関連要素

要素	役割
	ページや section の冒頭領域（ロゴ + nav を入れることが多い）
	ページや section の末尾領域
	本文から離れた補足（サイドバーの「関連記事」など）
	そのページの主たるコンテンツ（nav は main の外が一般的）

モバイルメニュー（ハンバーガー）の実装パターン

近年の Web サイトでは、画面幅が狭い場合に nav を折りたたんでハンバーガーアイコンで開閉するのが標準です。アクセシビリティを担保するには次の要素が必要。

• ボタン側に aria-expanded（展開状態）と aria-controls（対応する nav の id）を付与
• nav 側には非表示時 hidden 属性または display:none を付け、スクリーンリーダーから隠す
• キーボードのみで操作できるように、ハンバーガーボタンを で実装
• Esc キーで閉じる JS をつけると親切

nav の入れ子は OK か

WHATWG 仕様上、nav の中に nav を入れることは禁止されていません。とはいえ意味的に混乱するため、1 ページ内で複数の nav を並列に置く方が一般的です。サイドナビをグローバルナビの内側に書きたくなった場合は、入れ子ではなく独立した nav として並べましょう。

FAQ

Q: nav 内に ul を必ず使う？
A: 必須ではない。div + a でも良いが、リンク集合はリスト構造が論理的に正しい。

Q: nav にも heading（h1〜h6）を入れていい？
A: 入れて良い。「メニュー」「目次」など、ナビの主題を見出しで示すと aria-labelledby と組み合わせやすい。

Q: モバイルのハンバーガーメニューも nav？
A: 中身がグローバルナビなら nav で囲む。aria-expanded / aria-controls で展開状態を持たせるのが定番。

関連: HTML セクション要素 / header 要素