<nav>: ナビゲーションセクション要素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
<nav>
は HTML の要素で、現在の文書内の他の部分や他の文書へのナビゲーションリンクを提供するためのセクションを表します。ナビゲーションセクションの一般的な例としてメニュー、目次、索引などがあります。
試してみましょう
属性
この要素にはグローバル属性のみがあります。
使用上の注意
- すべてのリンクを
<nav>
要素に入れる必要はありません。<nav>
はナビゲーションリンクの主要なブロックのみに用います。<footer>
にもよくリンクのリストが設置されますが、<nav>
要素の中に入れる必要はありません。 <nav>
要素は文書内に複数設定することができます。例えば、サイトナビゲーションを一つ、ページ内ナビゲーションを一つなどです。このような場合、アクセシビリティを強化するために、aria-labelledby
を使用することができます。例をご覧ください。- スクリーンリーダーのような障碍者向けのユーザーエージェントは、この要素を使用してナビゲーション用のコンテンツを初期読み上げから省略するかを判断するために使用することがあります。
例
この例では、<nav>
ブロックを使用して、リンクの番号なしリスト (<ul>
) を囲んでいます。適切な CSS によってサイドバー、ナビゲーションバー、あるいはドロップダウンメニューにすることができます。
html
<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
nav
要素の意味づけはリンクを提供することです。しかし、nav
要素はリストを格納する必要はなく、他の種類のコンテンツを格納することもできます。このナビゲーションブロックでは、リンクは散文で指定されています。
html
<nav>
<h2>Navigation</h2>
<p>
You are on my home page. To the north lies <a href="/blog">my blog</a>, from
whence the sounds of battle can be heard. To the east you can see a large
mountain, upon which many <a href="/school">school papers</a> are littered.
Far up this mountain you can spy a little figure who appears to be me,
desperately scribbling a <a href="/school/thesis">thesis</a>.
</p>
<p>
To the west are several exits. One fun-looking exit is labeled
<a href="https://games.example.com/">"games"</a>. Another more
boring-looking exit is labeled <a href="https://isp.example.net/">ISP™</a>.
</p>
<p>
To the south lies a dark and dank <a href="/about">contacts page</a>.
Cobwebs cover its disused entrance, and at one point you see a rat run
quickly out of the page.
</p>
</nav>
結果
技術的概要
コンテンツカテゴリー | フローコンテンツ、 区分コンテンツ、知覚可能コンテンツ |
---|---|
許可されている内容 | フローコンテンツ |
タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
暗黙の ARIA ロール |
navigation
|
許可されている ARIA ロール | 許可されている role なし |
DOM インターフェイス | HTMLElement |
仕様書
Specification |
---|
HTML Standard # the-nav-element |
ブラウザーの互換性
BCD tables only load in the browser