HTML の <nav> 要素は、現在の文書内の他の部分や他の文書へのナビゲーションリンクを提供するためのセクションを表します。ナビゲーションセクションの一般的な例としてメニュー、目次、索引などがあります。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
| コンテンツカテゴリ | フローコンテンツ、区分コンテンツ、知覚可能コンテンツ |
|---|---|
| 許可されている内容 | フローコンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
| 許可されている ARIA ロール | なし |
| DOM インターフェイス | HTMLElement |
属性
この要素にはグローバル属性のみがあります。
使用上の注意
- すべてのリンクを
<nav>要素に入れる必要はありません。<nav>はナビゲーションリンクの主要なブロックのみに用います。<footer>にもよくリンクのリストが設置されますが、<nav>要素の中に入れる必要はありません。 <nav>要素は文書内に複数設定することができます。例えば、サイトナビゲーションを一つ、ページ内ナビゲーションを一つなどです。このような場合、アクセシビリティを強化するために、aria-labelledbyを使用することができます。例をご覧ください。- スクリーンリーダーのような障碍者向けのユーザーエージェントは、この要素を使用してナビゲーション用のコンテンツを初期読み上げから省略するかを判断するために使用することがあります。
例
この例では、リンクの番号なしリスト (<ul>) を包含するために <nav> ブロックを使用します。適切な CSS によってサイドバー、ナビゲーションバー、あるいはドロップダウンメニューにすることができます。
<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| HTML Living Standard <nav> の定義 |
現行の標準 | 最新の W3C スナップショットから変更なし |
| HTML5 <nav> の定義 |
勧告 | 初回定義 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
nav | Chrome 完全対応 5 | Edge 完全対応 あり | Firefox 完全対応 4 | IE 完全対応 9 | Opera 完全対応 11.1 | Safari 完全対応 4.1 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 11.1 | Safari iOS 完全対応 4.2 | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応