HTML要素辞書 by Sentaro

<nav>

ナビゲーション（Navigation）要素。主要なナビゲーションリンクをまとめるセマンティックなブロック要素です。

info

概要

<nav> 要素は、主要なナビゲーションリンク（例: メインメニュー、目次、パンくずリストなど）のセクションを定義します。検索エンジンやスクリーンリーダーなどのユーザーエージェントに、そのセクションがナビゲーションを目的としていることを伝える、セマンティックな意味を持つ要素です。
すべてのリンク集に使う必要はなく、文書の主要なナビゲーションブロックにのみ使用します。

play_circle

デモ (静的表示)

HTML (Source)

<nav> <ul> <li><a href="/">ホーム</a></li> <li><a href="/service">サービス</a></li> <li><a href="/contact">お問い合わせ</a></li> </ul> </nav>

Preview (Result)

list

属性 (Attributes)

属性名	説明
グローバル属性	`<nav>` 要素には固有の属性はありません。すべてのHTML要素に共通するグローバル属性のみを受け付けます。（例: `id`, `class`, `aria-label`など）

code

実用例

1. メインナビゲーション

<nav aria-label="メインメニュー">
 <ul>
  <li><a href="/">トップ</a></li>
  <li><a href="/about">会社概要</a></li>
  <li><a href="/blog">ブログ</a></li>
 </ul>
</nav>

2. パンくずリスト (ブレッドクラム)

<nav aria-label="パンくずリスト">
 <ol>
  <li><a href="/">ホーム</a></li>
  <li><a href="/category">カテゴリ</a></li>
  <li aria-current="page">現在のページ</li>
 </ol>
</nav>

3. ページ内目次 (TOC)

<nav aria-label="ページ内目次">
 <h2>目次</h2>
 <ul>
  <li><a href="#section1">セクション1の概要</a></li>
  <li><a href="#section2">セクション2の実装</a></li>
 </ul>
</nav>

lightbulb

知っておくべき重要事項

description

主要なナビゲーションのみに使用
<nav> 要素は、文書の主要なナビゲーションブロック（サイトマップ、メインメニュー、目次など）にのみ使用すべきです。フッターにあるような小さなリンク集（例: 著作権情報、プライバシーポリシーへのリンク）には、通常 <nav> は不要です。

accessibility_new

アクセシビリティ (ARIAラベル)
文書内に複数の <nav> 要素がある場合（例: メインナビ、サイドナビ、パンくずリスト）、スクリーンリーダーユーザーのために、それぞれの <nav> に aria-label 属性で具体的な名前（例: aria-label="主要ナビゲーション"）を付けることが推奨されます。

私について利用規約プライバシーポリシー