HTML の <nav> 要素は、現在の文書内の他の部分や他の文書へのナビゲーションリンクを提供するためのセクションを表します。ナビゲーションセクションの一般的な例としてメニュー、目次、索引などがあります。

コンテンツカテゴリ フローコンテンツ区分コンテンツ、知覚可能コンテンツ
許可されている内容 フローコンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 フローコンテンツを受け入れるすべての要素
許可されている 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> の定義
勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 5Edge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 11.1Safari 完全対応 4.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 11Safari iOS 完全対応 4.2Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報