HTML Living Standard/nav
nav 要素
[編集]<nav> 要素は、文書やウェブサイト内の主要なナビゲーションリンクをグループ化するために使用されるセマンティック要素です。ナビゲーション要素として明確に定義されており、ウェブサイト全体の構造や文書内の異なるセクションへのリンクを示します。
概要
[編集]- 役割: ナビゲーションリンクを意味的にグループ化する。
- 主な用途:
- サイト全体のナビゲーションメニュー
- 文書内の目次
- ページ上部や下部のリンク群
使用例
[編集]基本的な使用例
[編集]以下は、ウェブサイトの主要なページへのリンクを含む <nav> 要素の例です。
<nav> <ul> <li><a href="/home">ホーム</a></li> <li><a href="/about">会社概要</a></li> <li><a href="/services">サービス</a></li> <li><a href="/contact">お問い合わせ</a></li> </ul> </nav>
ページ内ナビゲーションの例
[編集]ページ内の特定のセクションへのリンクを提供する場合にも <nav> 要素を使用できます。
<nav> <ul> <li><a href="#introduction">はじめに</a></li> <li><a href="#features">特徴</a></li> <li><a href="#pricing">価格</a></li> <li><a href="#faq">よくある質問</a></li> </ul> </nav>
属性
[編集]<nav> 要素は、グローバル属性をサポートします。
グローバル属性の例
[編集]以下は、class と id 属性を使用して <nav> 要素をスタイリングおよび識別する例です。
<nav id="main-navigation" class="primary-nav"> <ul> <li><a href="/home">ホーム</a></li> <li><a href="/blog">ブログ</a></li> <li><a href="/support">サポート</a></li> </ul> </nav>
不適切な使用例
[編集]ページのすべてのリンクを <nav> に含めるべきではありません。主要なナビゲーションリンクに限定してください。
アクセシビリティの考慮
[編集]- ランドマーク役割:
<nav>要素は、支援技術によって「ナビゲーションランドマーク」として認識されます。これにより、スクリーンリーダー利用者が文書内を効率的に移動できます。 - 明確なラベル付け: 複数の
<nav>要素を使用する場合は、aria-label属性を使用して、それぞれの目的を明確にします。
- 例
<nav aria-label="メインメニュー"> <ul> <li><a href="/home">ホーム</a></li> <li><a href="/about">会社概要</a></li> </ul> </nav> <nav aria-label="フッターメニュー"> <ul> <li><a href="/privacy">プライバシーポリシー</a></li> <li><a href="/terms">利用規約</a></li> </ul> </nav>
ベストプラクティス
[編集]- リンクを整理する:
<nav>要素には、ユーザーが重要なページやセクションに素早くアクセスできるリンクのみを含めるべきです。 - 複数のナビゲーション: メインナビゲーション、フッターナビゲーションなど、異なる目的のために複数の
<nav>要素を使用できます。 - 視覚的な一貫性: スタイリングを通じてナビゲーションの視覚的な認識を容易にします。
使用上の注意
[編集]- 文書全体の構造を把握する:
<nav>要素は文書内で意味的なナビゲーションを提供しますが、あまり多用すると混乱を招く可能性があります。 - 補助的なリンク: ページ内の補助的なリンクやコンテンツの一部としてのリンクは、
<nav>の外で定義することを検討してください。
まとめ
[編集]<nav> 要素は、文書やウェブサイトの主要なナビゲーションリンクをセマンティックに定義するための重要な要素です。適切に使用することで、文書構造を明確にし、アクセス可能性を向上させます。