ナビゲーションタグは何個まで？複数使用はOK？
Webサイトを構築する上で、ユーザーを適切なページへ導くナビゲーションは非常に重要です。HTMLでは、このナビゲーションをマークアップするために<nav>タグが用意されています。しかし、この<nav>タグ、いくつまで使って良いのか迷ったことはありませんか？ この記事では、<nav>タグの複数使用について解説し、適切なナビゲーション設計のヒントをご紹介します。
結論：ナビゲーション要素には、いくつでも<nav>タグを使用してOK
結論から言うと、主要なナビゲーション要素をマークアップする際に、複数の<nav>タグを使用することは全く問題ありません。むしろ、サイト構造によっては複数の<nav>タグを使うことで、より意味的にマークアップすることができます。
<nav>タグを使用する場面
<nav>タグは、そのページの主要なナビゲーションリンクをマークアップするために使用します。具体的には、以下のようなナビゲーションが該当します。
| ナビゲーションの種類 | 説明 |
|---|---|
| グローバルナビゲーション | サイト全体の主要なセクションへのリンクを提供する。ヘッダーに配置されることが多い。 |
| ローカルナビゲーション | 現在閲覧しているセクション内の下位ページへのリンクを提供する。サイドバーに配置されることが多い。 |
| パンくずリスト | 現在ページがサイト全体のどこにあるのかを示す階層リンクを提供する。 |
| ページ内ナビゲーション | 長いページ内で、特定のセクションへのジャンプリンクを提供する。 |
複数<nav>タグ使用の例
例えば、以下のようなHTML構造を考えてみましょう。
<header>
<nav> <!-- グローバルナビゲーション -->
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">会社概要</a></li>
<li><a href="/service">サービス</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<article>
<nav> <!-- ページ内ナビゲーション -->
<ul>
<li><a href="#section1">セクション1</a></li>
<li><a href="#section2">セクション2</a></li>
<li><a href="#section3">セクション3</a></li>
</ul>
</nav>
<!-- 記事コンテンツ -->
</article>
</main>
<footer>
<nav> <!-- フッターナビゲーション -->
<ul>
<li><a href="/privacy">プライバシーポリシー</a></li>
<li><a href="/sitemap">サイトマップ</a></li>
</ul>
</nav>
</footer>
この例では、グローバルナビゲーション、ページ内ナビゲーション、フッターナビゲーションという3つの異なるナビゲーション要素に、それぞれ<nav>タグを使用しています。このように、異なる役割を持つナビゲーションを明確に分けることで、スクリーンリーダーなどの支援技術を利用するユーザーにとっても、サイト構造が理解しやすくなるというメリットがあります。
まとめ
<nav>タグは、主要なナビゲーション要素をマークアップするために使用し、複数使用しても問題ありません。重要なのは、ユーザーにとって分かりやすく、使いやすいナビゲーションを設計することです。サイト構造やコンテンツに合わせて、適切に<nav>タグを使用しましょう。
よくある質問
Q1: すべてのリンクを<nav>タグで囲む必要はありますか？
A1: いいえ、すべてのリンクを<nav>タグで囲む必要はありません。あくまで主要なナビゲーションリンクをマークアップするために使用します。例えば、記事中の関連記事へのリンクや、サイドバーの最新記事へのリンクなどは、<nav>タグで囲まずに、通常のアンカータグ(<a>)でマークアップします。
Q2: <nav>タグを入れ子にしても良いですか？
A2: はい、<nav>タグを入れ子にすることは可能です。例えば、グローバルナビゲーションの中にドロップダウンメニューがあり、その中にさらにサブメニューがある場合などは、<nav>タグを入れ子にしてマークアップすることで、ナビゲーションの階層構造を表現することができます。
Q3: <nav>タグを使わずに、CSSだけでナビゲーションを実装しても良いですか？
A3: CSSだけでナビゲーションを実装することも可能ですが、アクセシビリティの観点から、<nav>タグを使用して意味的にマークアップすることが推奨されます。スクリーンリーダーなどの支援技術は、HTMLの構造を解釈して情報をユーザーに伝えます。そのため、<nav>タグを使用することで、支援技術を利用するユーザーにとっても、ナビゲーションが認識しやすくなるというメリットがあります。