<nav>: ナビゲーションセクション要素
試してみましょう
HTML の <nav>
要素は、現在の文書内の他の部分や他の文書へのナビゲーションリンクを提供するためのセクションを表します。ナビゲーションセクションの一般的な例としてメニュー、目次、索引などがあります。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
属性
この要素にはグローバル属性のみがあります。
使用上の注意
- すべてのリンクを
<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> の定義 |
勧告 | 初回定義 |
ブラウザーの対応
BCD tables only load in the browser