HTML REFERENCE
ナビゲーション・リンク
ー サイト内外への主要なナビゲーションリンク群を表すセマンティック要素
<nav> 要素は HTML5 で導入されたセマンティック要素で、ページ内外への「主要なナビゲーションリンク群」を表します。グローバルナビゲーション、サイドバーのカテゴリメニュー、パンくずリスト、ページ内目次（テーブルオブコンテンツ）などが典型的な用途です。
重要なのは「すべてのリンク集合に <nav> を使うわけではない」という点です。W3C の仕様では「主要なナビゲーションブロック」にのみ使用すべきと明記されています。フッターの利用規約・プライバシーポリシーリンク、記事内の参考文献リンクなどは <nav> ではなく <ul> や <p> での表現が適切です。
<nav> の最大の利点はアクセシビリティにあります。スクリーンリーダーは <nav> をランドマークとして認識し、ユーザーがキーボードショートカットでナビゲーション領域に直接ジャンプできるようになります。複数の <nav> が存在する場合は aria-label で名前を付けることで、ランドマーク一覧に「グローバルナビゲーション」「パンくずリスト」などの識別名が表示され、ユーザーが目的のナビゲーションを選べるようになります。
グローバルナビゲーション（ヘッダー内）、サイドバーのカテゴリ・タグメニュー、パンくずリスト、記事内の目次（TOC）など、「ユーザーが目的地へ移動するために使う主要なリンク群」に使用する。補助的・装飾的なリンクリストには使わない。
♿ <nav> は暗黙的に ARIA ロール navigation を持ちます。スクリーンリーダーユーザーはランドマークナビゲーション（NVDA: D キー、VoiceOver: ローター）で <nav> 間を素早く移動できます。ページに複数の <nav> がある場合は、必ず aria-label="グローバルナビゲーション" のように識別名を付与してください。aria-label がないと、ランドマーク一覧に「ナビゲーション」が複数並び、どれが何のナビかわからなくなります。また、現在のページに対応するリンクには aria-current="page" を付与するとスクリーンリーダーがそのリンクを「現在のページ」として読み上げます。
📦 <nav> はフローコンテンツを内包できます。最も一般的なのは <ul> + <li> + <a> の組み合わせです。パンくずリストには順序の意味を持つ <ol> が適しています。ドロップダウンメニューを実装する場合は、サブメニューを <ul> でネストし、トグルボタンに aria-expanded を付与してアクセシビリティを確保します。<nav> 内には見出しを入れても構いませんが、多くの場合は視覚的に非表示にして支援技術向けに提供するパターンが使われます。
| 属性名 | 説明 |
|---|---|
HTMLカテゴリ |
フローコンテンツ、セクショニングコンテンツ、パルパブルコンテンツ |
親要素の制限 |
フローコンテンツを受け入れる任意の要素 |
ARIAロール |
navigation |
aria-label 推奨 |
複数の <nav> がある場合は aria-label で識別名を付与することを強く推奨 |
aria-current |
現在ページに対応するリンクに aria-current="page" を付与する |
グローバル属性 |
すべてのグローバル属性が使用可能 |
HTML5 導入 |
HTML5（2014年 W3C 勧告）で追加 |
ヘッダーに配置するグローバルナビ。aria-label でナビの役割を明示し、aria-current="page" で現在ページを示す。
nav { background: #1a56db; padding: 0 16px; border-radius: 8px; } .nav-list { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; font-family: sans-serif; } .nav-list a { display: block; padding: 14px 16px; color: rgba(255,255,255,0.8); text-decoration: none; font-size: 14px; font-weight: 600; border-radius: 4px; transition: background 0.15s; } .nav-list a:hover { background: rgba(255,255,255,0.12); color: white; } .nav-list a[aria-current='page'] { color: white; background: rgba(255,255,255,0.18); }<nav aria-label="グローバルナビゲーション">
<ul class="nav-list">
<li><a href="/" aria-current="page">ホーム</a></li>
<li><a href="/html">HTML</a></li>
<li><a href="/css">CSS</a></li>
<li><a href="/js">JavaScript</a></li>
<li><a href="/about">このサイトについて</a></li>
</ul>
</nav>現在地を示すパンくずリスト。順序が意味を持つため <ol> を使い、aria-label で役割を明示。最後の項目は aria-current="page" を付与。
.breadcrumb { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 12px 16px; background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0; font-family: sans-serif; flex-wrap: wrap; } .breadcrumb li { display: flex; align-items: center; gap: 8px; font-size: 13px; } .breadcrumb li:not(:last-child)::after { content: '›'; color: #94a3b8; font-size: 16px; } .breadcrumb a { color: #1a56db; text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb li[aria-current='page'] { color: #374151; font-weight: 700; }<nav aria-label="パンくずリスト">
<ol class="breadcrumb">
<li><a href="/">ホーム</a></li>
<li><a href="/html">HTML リファレンス</a></li>
<li><a href="/html/semantic">セマンティック要素</a></li>
<li aria-current="page">nav 要素</li>
</ol>
</nav>フッターのすべてのリンク、記事内の参考リンクなど「主要でないリンク集」にも <nav> を使うのは過剰。また、複数の <nav> に aria-label を付けないと、スクリーンリーダーのランドマーク一覧で区別できなくなる。
<!-- ❌ 悪い例：補助的なリンク群にも <nav> を乱用している -->
<footer>
<nav><!-- フッターの全リンクに <nav> は過剰 -->
<a href="/terms">利用規約</a>
<a href="/privacy">プライバシーポリシー</a>
<a href="/sitemap">サイトマップ</a>
</nav>
</footer>
<!-- ✅ 良い例：補助的なリンクは <ul> で十分 -->
<footer>
<ul class="footer-links">
<li><a href="/terms">利用規約</a></li>
<li><a href="/privacy">プライバシーポリシー</a></li>
<li><a href="/sitemap">サイトマップ</a></li>
</ul>
</footer>