HTMLのnavタグの使い方！Webサイトのナビゲーションを定義

html

HTMLのnavタグについて書いています。

navタグは、Webサイト内の主要なナビゲーションリンクをマークアップするために使用されます。
これは、ヘッダーのグローバルナビゲーション、サイドバーのローカルナビゲーション、フッターの補足的なナビゲーションなど、サイト内の主要なリンク集を構造的に示すための要素です。

navタグの基本的な使い方と配置

navタグは、ナビゲーションリンクを囲むだけで使用できます。
通常、<header>, <aside>, <footer>などの構造要素内に配置されます。

<header>
  <h1>サイト名</h1>
  <nav>
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/about">会社概要</a></li>
      <li><a href="/products">製品情報</a></li>
      <li><a href="/contact">お問い合わせ</a></li>
    </ul>
  </nav>
</header>

<aside>
  <h2>関連コンテンツ</h2>
  <nav>
    <ul>
      <li><a href="/blog/article1">記事1</a></li>
      <li><a href="/blog/article2">記事2</a></li>
    </ul>
  </nav>
</aside>

<footer>
  <nav>
    <ul>
      <li><a href="/privacy">プライバシーポリシー</a></li>
      <li><a href="/terms">利用規約</a></li>
      <li><a href="/sitemap">サイトマップ</a></li>
    </ul>
  </nav>
  <p>© 2025 〇〇株式会社</p>
</footer>

上記のHTMLは、ヘッダー、サイドバー、フッターにそれぞれナビゲーションリンクをnavタグで囲んでマークアップした例です。
ブラウザで実際に表示すると、下記のようになりました。
HTMLのnavタグの表示確認

navタグの意味合いと重要性

navタグは、囲まれたコンテンツがWebサイトの主要なナビゲーションであることを示す意味合い（セマンティクス）を持っています。
これは、単にリンクをグループ化するためだけでなく、Webページの構造を明確にします。
そして、検索エンジンやスクリーンリーダーなどの支援技術がナビゲーションの役割を持つコンテンツを認識できるようにするために重要です。

navタグとアクセシビリティ

navタグを適切に使用することは、Webサイトのアクセシビリティ向上に貢献します。

  • スクリーンリーダー: スクリーンリーダーは、navタグを認識し、ユーザーに「これはナビゲーションリンクの集まりである」と伝えることができます。これにより、キーボード操作だけでWebサイトを閲覧するユーザーや、視覚障碍のあるユーザーが、主要なナビゲーションに容易にアクセスできるようになります。
  • ARIA属性: 必要に応じて、ARIA属性（例: aria-label="メインナビゲーション") をnavタグに追加することで、ナビゲーションの目的をより具体的に説明できます。
<nav aria-label="メインナビゲーション">
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about">会社概要</a></li>
    </ul>
</nav>

navタグの使用例

navタグは、以下のような主要なナビゲーション要素をマークアップする際に使用します。

  • グローバルナビゲーション: サイト全体の主要なページへのリンク（ヘッダー部分に配置されることが多い）。
  • ローカルナビゲーション: 現在のページやセクションに関連するリンク（サイドバーなどに配置されることが多い）。
  • パンくずリスト: サイト内の現在位置を示すナビゲーション。
  • ページネーション: 複数のページに分割されたコンテンツのページ移動リンク。

ただし、パンくずリストやページネーションなど、文脈によってはnavタグが適切でない場合もあります。

例えば、ページネーションが主要なナビゲーションではなく、コンテンツの一部として扱われる場合は、<div class="pagination"> のようにマークアップすることも考えられます。
navタグは、あくまでサイトの主要なナビゲーション構造を示すために使用するべきです。

navタグを使ったCSSデザイン例3つ

navタグ自体にはデフォルトのスタイルはほとんどありませんが、その内部のリスト (<ul>, <ol>) やリンク (<a>) をCSSで様々にデザインすることができます。
以下にいくつかの基本的なデザイン例を示します。

例1：水平ナビゲーションバー

navタグの中身を横並びにして、背景色、フォント色などのスタイルを適用した例です。

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* 横並びにする */
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
}

nav ul li {
  margin-right: 20px;
}

nav ul li:last-child {
  margin-right: 0;
}

nav ul li a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
}

nav ul li a:hover {
  background-color: #ddd;
}

<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about">会社概要</a></li>
    <li><a href="/products">製品情報</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

ブラウザで表示すると、下記のように表示されました。
HTMLのnavタグを使ったデザイン1

例2：垂直ナビゲーションメニュー

navタグの中身を縦並びにして、背景色、フォント色などのスタイルを適用した例です。

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #333;
  width: 200px;
}

nav ul li a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: white;
  border-bottom: 1px solid #555;
}

nav ul li a:hover {
  background-color: #555;
}

nav ul li:last-child a {
  border-bottom: none;
}

<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/services">サービス</a></li>
    <li><a href="/portfolio">ポートフォリオ</a></li>
    <li><a href="/blog">ブログ</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

ブラウザで表示すると、下記のように表示されました。
HTMLのnavタグを使ったデザイン2

例3：ドロップダウンメニュー（基本的な構造のみ）

navタグの中身を横並びにして、ホバー時にドロップダウンメニューを出すようにした例です。

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  background-color: #f0f0f0;
}

nav ul li {
  position: relative; /* ドロップダウンの基準点 */
}

nav ul li a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
}

nav ul li ul {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  display: none; /* 最初は非表示 */
}

nav ul li:hover > ul {
  display: block; /* ホバーで表示 */
}

nav ul li ul li a {
  padding: 10px 15px;
  width: 150px;
}

<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li>
      <a href="/products">製品</a>
      <ul>
        <li><a href="/products/category1">カテゴリ 1</a></li>
        <li><a href="/products/category2">カテゴリ 2</a></li>
      </ul>
    </li>
    <li><a href="/about">会社概要</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

ブラウザで表示すると、下記のように表示されました。
HTMLのnavタグを使ったデザイン3

navタグを使用する際の注意点

  • 主要なナビゲーションのみに使用する:navタグは、Webサイトの主要なナビゲーションリンクのグループに対してのみ使用するべきです。本文中の単なるリンク集や、関連性の低いリンクの集まりには使用するべきではありません。
  • リスト (<ul> または <ol>) との組み合わせ:navタグの中には、通常、順序なしリスト (<ul>) や順序付きリスト (<ol>) を使用してリンクを構造化することが推奨されます。これにより、リンクのリストであることが明確になり、アクセシビリティも向上します。
  • 意味的に適切な配置:navタグは、ヘッダー、サイドバー、フッターなど、意味的に適切な場所に配置します。
  • スタイリングは CSS で:navタグ自体の見た目や、その中のリンクのスタイルは、CSS で制御します。

まとめ

navタグは、Webサイトの主要なナビゲーションリンクを意味的にマークアップするための重要なHTML要素です。
適切に使用することで、Webページの構造が明確になり、アクセシビリティが向上し、検索エンジンにも理解されやすくなります。

主要なナビゲーションリンクのグループには積極的にnavタグを使用し、リスト (<ul> や <ol>) と組み合わせて構造化することを心がけましょう。

HTML
yasuaki

コメント