<nav>: ナビゲーションセクション要素
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<nav> は HTML の要素で、現在の文書内の他の部分や他の文書へのナビゲーションリンクを提供するためのセクションを表します。ナビゲーションセクションの一般的な例としてメニュー、目次、索引などがあります。
試してみましょう
<nav class="crumbs">
<ol>
<li class="crumb"><a href="#">Bikes</a></li>
<li class="crumb"><a href="#">BMX</a></li>
<li class="crumb">Jump Bike 3000</li>
</ol>
</nav>
<h1>Jump Bike 3000</h1>
<p>
この BMX バイクは、プロの世界へ踏み出す確かな一歩だ。見た目も乗り心地も本格的で、スキルを磨くために設計されている。
</p>
nav {
border-bottom: 1px solid black;
}
.crumbs ol {
list-style-type: none;
padding-left: 0;
}
.crumb {
display: inline-block;
}
.crumb a::after {
display: inline-block;
color: black;
content: ">";
font-size: 80%;
font-weight: bold;
padding: 0 3px;
}
属性
この要素にはグローバル属性のみがあります。
使用上の注意
- すべてのリンクを
<nav>要素に入れる必要はありません。<nav>はナビゲーションリンクの主要なブロックのみに用います。<footer>にもよくリンクのリストが設置されますが、<nav>要素の中に入れる必要はありません。 <nav>要素は文書内に複数置くことができます。例えば、サイトナビゲーションを一つ、ページ内ナビゲーションを一つなどです。このような場合、アクセシビリティを強化するために、aria-labelledbyを使用することができます。例をご覧ください。- スクリーンリーダーのような障碍者向けのユーザーエージェントは、この要素を使用してナビゲーション用のコンテンツを初期読み上げから省略するかを判断するために使用することがあります。
例
この例では、<nav> ブロックを使用して、リンクの番号なしリスト (<ul>) を囲んでいます。適切な CSS によってサイドバーやナビゲーションバー、ドロップダウンメニューなどにすることができます。
html
<nav class="menu">
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">概要</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
nav 要素の意味づけはリンクを提供することです。しかし、nav 要素はリストを格納する必要はなく、他の種類のコンテンツを格納することもできます。このナビゲーションブロックでは、リンクは散文で指定されています。
html
<nav>
<h2>ナビゲーション</h2>
<p>
あなたは私のホームページにいます。北には<a href="/https/developer.mozilla.org/blog">私のブログ</a>があり、そこから戦いの音が聞こえてきます。東には大きな山が見え、その山には多くの<a href="/https/developer.mozilla.org/school">学校のレポート</a>が散らばっています。
この山のはるか上の方で、私らしき小さな人影が見えます。必死に<a href="/https/developer.mozilla.org/school/thesis">論文</a>を書きなぐっています。
</p>
<p>
西側にはいくつかの出口があります。楽しそうな出口の一つは<a href="https://games.example.com/">「ゲーム」</a>と表示されています。もう一つ、面白くなさそうな出口は <a href="https://isp.example.net/">ISP™</a> と表示されています。
</p>
<p>
南には暗く湿った<a href="/https/developer.mozilla.org/about">連絡先ページ</a>が広がっています。
使われなくなった入口は蜘蛛の巣で覆われており、ある時ページからネズミが素早く駆け出していきます。
</p>
</nav>
技術的概要
| コンテンツカテゴリー | フローコンテンツ、 区分コンテンツ、知覚可能コンテンツ |
|---|---|
| 許可されている内容 | フローコンテンツ |
| タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール |
navigation
|
| 許可されている ARIA ロール | 許可されている role なし |
| DOM インターフェイス | HTMLElement |
仕様書
| Specification |
|---|
| HTML # the-nav-element |