HTMLのnavタグとは？div・ulとの違い、パンくずリストの実装例を解説

HTMLでWebサイトのメニューを作っていると、「navタグ」というタグを見かけることがあります。しかし、「navタグは何のために使うの？」「divタグやulタグだけでメニューを作るのと何が違うの？」「パンくずリストにもnavタグを使うの？」と迷う方も多いのではないでしょうか。navタグは、ページ内やサイト内の主要なナビゲーションを表すためのHTMLタグです。

この記事では、HTMLのnavタグの意味や基本的な使い方、divタグやulタグだけで作るメニューとの違い、パンくずリストでの活用方法、SEOやアクセシビリティで意識したいポイントを初心者向けにわかりやすく解説します。サンプルコード付きで紹介するので、HTMLを学び始めたばかりの方もぜひ参考にしてください。

HTMLのnavタグとは？

navタグは、Webページ内の主要なナビゲーションを表すためのタグです。サイト内メニュー、ページ内目次、フッターナビゲーションなど、ユーザーが別のページや別の場所へ移動するためのリンク群をまとめるときに使われます。

navタグの役割

navタグの主な役割は、リンクの集まりがナビゲーションであることをHTML上で示すことです。

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

上記のように、navタグの中にulタグやaタグを入れてメニューを作ることがあります。navタグを使うことで、「ここはページ移動のための主要メニューである」と伝えやすくなります。

divタグやulタグだけのメニューとの違い

メニューの見た目だけであれば、divタグやulタグだけでも作れます。

<div class="menu">
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about/">会社概要</a></li>
  </ul>
</div>

しかし、この書き方では、HTMLの意味として「ここが主要なナビゲーションである」とは伝わりにくくなります。

<nav aria-label="メインメニュー">
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about/">会社概要</a></li>
  </ul>
</nav>

navタグを使うメリットは、検索エンジンやスクリーンリーダーに対して、そのリンク群が「主要なナビゲーション」であると構造的に伝えられる点です。ulタグはリスト構造、navタグはナビゲーションのまとまりを表すため、役割が異なります。

すべてのリンクにnavタグを使うわけではない

navタグは、主要なナビゲーションに使うタグです。本文中の通常リンクや、1つだけの参考リンクまでnavタグで囲む必要はありません。

<p>詳しくは<a href="/html/">HTMLの記事</a>をご覧ください。</p>

本文中の単体リンクや補足リンクを、何でもnavタグで囲むのは避けましょう。サイトの主要メニューや目次など、ナビゲーションとしてまとまっているリンク群に使うのが基本です。

navタグは複数使える

1つのページ内にnavタグを複数使うこともできます。例えば、ヘッダーのメインメニュー、記事内の目次、フッターの補助メニューなどです。

<nav aria-label="グローバルナビゲーション">...</nav>
<nav aria-label="記事内目次">...</nav>
<nav aria-label="フッターナビゲーション">...</nav>

複数のnavタグを使う場合は、aria-labelで役割を分けると分かりやすくなります。

HTMLでnavタグを使う方法

navタグは、リンクをまとめるために使います。一般的には、navタグの中にulタグ、liタグ、aタグを組み合わせてメニューを作ります。

基本的な書き方

navタグの基本的な書き方は、「<nav>リンクのまとまり</nav>」です。

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

シンプルなメニューであれば、aタグを並べるだけでも作れます。ただし、複数のメニュー項目を整理する場合はulタグとliタグを使うことが多いです。

ulタグとliタグでメニューを作る

メニュー項目が複数ある場合は、リストとして書くと構造が分かりやすくなります。

<nav aria-label="メインメニュー">
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/service/">サービス</a></li>
    <li><a href="/contact/">お問い合わせ</a></li>
  </ul>
</nav>

navタグはナビゲーション全体を表し、ul・li・aタグでメニュー項目を表すと考えると分かりやすいです。

headerタグ内で使う方法

サイト上部のメインメニューは、headerタグの中にnavタグを入れて作ることがあります。

<header>
  <h1>サイト名</h1>
  <nav aria-label="グローバルナビゲーション">
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/blog/">ブログ</a></li>
    </ul>
  </nav>
</header>

ヘッダー内のnavタグは、ユーザーがサイト内を移動するための入り口になります。

footerタグ内で使う方法

フッターにも、プライバシーポリシーや会社概要などへのリンクをまとめるnavタグを置くことがあります。

<footer>
  <nav aria-label="フッターナビゲーション">
    <a href="/privacy/">プライバシーポリシー</a>
    <a href="/contact/">お問い合わせ</a>
  </nav>
</footer>

同じページに複数のnavタグを置く場合は、それぞれの役割が分かるようにaria-labelを付けるのがおすすめです。

パンくずリストで使う方法

navタグは、ヘッダーメニューやフッターメニューだけでなく、パンくずリストにも使えます。パンくずリストとは、現在のページがサイト内のどの階層にあるかを示すナビゲーションです。

<nav aria-label="パンくずリスト">
  <ol>
    <li><a href="/">ホーム</a></li>
    <li><a href="/magazine/">マガジン</a></li>
    <li>HTMLのnavタグとは？</li>
  </ol>
</nav>

パンくずリストでは、現在ページまでの階層を順番に示すため、ulタグよりolタグを使うことがあります。パンくずリストをnavタグで囲むと、現在地を示すナビゲーションであることをHTML構造として伝えやすくなります。

SEOの観点でも、パンくずリストはユーザーがサイト構造を理解しやすくなる重要な導線です。検索エンジン向けには構造化データを組み合わせることもありますが、まずはHTML上で分かりやすいナビゲーションとして作ることが大切です。

navタグとSEO・アクセシビリティの関係

navタグは、検索順位を直接上げるためだけのタグではありません。しかし、ページ構造やリンクの役割を分かりやすくすることで、ユーザーにも検索エンジンにも理解しやすいHTMLにつながります。

主要リンクを整理しやすくなる

navタグを使うと、サイト内の主要リンクをまとめて管理しやすくなります。

<nav aria-label="サイト内メニュー">
  <ul>
    <li><a href="/html/">HTML</a></li>
    <li><a href="/css/">CSS</a></li>
  </ul>
</nav>

読者が次に見たいページへ移動しやすいメニューを作ることは、使いやすいサイト設計につながります。

リンクを詰め込みすぎない

SEOを意識して多くの内部リンクを入れたくなることもありますが、navタグ内に大量のリンクを詰め込むと使いづらくなります。

navタグには、ユーザーにとって重要なリンクを整理して入れることが大切です。すべてのページへのリンクを無理に入れるのではなく、目的に応じて選びましょう。

aria-labelでナビゲーションの種類を伝える

ページ内に複数のnavタグがある場合は、aria-labelを使うと役割が分かりやすくなります。

<nav aria-label="メインメニュー">...</nav>
<nav aria-label="記事内目次">...</nav>

aria-labelを付けることで、スクリーンリーダーなどでもナビゲーションの種類を区別しやすくなります。

公式ドキュメントも確認する

navタグやaria-labelの使い方をより詳しく確認したい場合は、公式ドキュメントも参考になります。

• MDN Web Docs nav要素：navタグの役割や使用例を確認できます。
• MDN Web Docs aria-label属性：aria-labelで要素に名前を付ける考え方を確認できます。
• W3C WAI-ARIA Authoring Practicesのパンくずリスト例：パンくずリストのアクセシビリティ実装例を確認できます。

より詳しいWeb標準のアクセシビリティ仕様や使い分けは、MDN Web DocsやW3Cなどの公式ドキュメントも参考にすると理解が深まります。

navタグを書く際の注意点

navタグは便利ですが、使い方を間違えるとHTML構造が分かりにくくなります。特に、単体リンクへの使用や、リンクの入れすぎには注意しましょう。

本文中の通常リンクには使わない

本文中にある通常のリンクは、navタグで囲む必要はありません。

<p>詳しくは<a href="/contact/">お問い合わせページ</a>をご覧ください。</p>

navタグは、主要なナビゲーションのまとまりに使うタグです。単体リンクや参考リンクには、通常のaタグを使いましょう。

ulタグだけで終わらせない

メニューをリストとして作るとき、ulタグやliタグは便利です。しかし、ulタグだけでは「これはナビゲーションである」という意味までは表せません。

<ul class="menu">
  <li><a href="/">ホーム</a></li>
  <li><a href="/contact/">お問い合わせ</a></li>
</ul>

主要メニューとして使うリンク一覧であれば、ulタグをnavタグで囲むと、リスト構造とナビゲーションの意味を両方伝えられます。

<nav aria-label="メインメニュー">
  <ul class="menu">
    <li><a href="/">ホーム</a></li>
    <li><a href="/contact/">お問い合わせ</a></li>
  </ul>
</nav>

見た目はCSSで整える

navタグはナビゲーションの意味を表すタグであり、見た目を整えるタグではありません。

nav ul {
  display: flex;
  gap: 24px;
  list-style: none;
}

HTMLではメニューの構造を作り、CSSで横並びや余白などのデザインを調整します。

スマートフォン表示も確認する

ナビゲーションは、PCでは横並びでもスマートフォンでは折り返したり、ハンバーガーメニューにしたりすることがあります。

メニュー項目が多い場合、スマートフォンで文字が詰まったり、タップしづらくなったりしないように注意しましょう。

まとめ

本記事では、HTMLのnavタグについて解説しました。

navタグは、Webページ内の主要なナビゲーションを表すためのHTMLタグです。サイト内メニュー、記事内目次、フッターナビゲーションなど、リンクのまとまりを表すときに使われます。

navタグは、すべてのリンクに使うタグではありません。本文中の通常リンクや単体の参考リンクではなく、ユーザーがページ内やサイト内を移動するための主要なリンク群に使うのが基本です。ヘッダーメニュー、フッターメニュー、記事内目次に加えて、パンくずリストもnavタグの代表的な活用例です。

navタグを使う際は、divタグやulタグだけで見た目を作るのではなく、主要なナビゲーションであることをHTML構造として伝える意識が大切です。複数のnavタグを使う場合はaria-labelで役割を分け、スマートフォンでも使いやすいメニューにしましょう。