nav 要素は、いわゆる“ナビ”以外にも、なにげに使われている件【初心者向け】

2025/05/17 Web

グローバルナビなどを作るときは、よく ul 要素などのリストを使いますよね。それは超基本的な内容で HTML を習い始めて割と初期の段階で学ぶことになるかと思います。

しかしそれとは別に、なにやら nav 要素なるものが存在するらしいのです……。

今回はそいつの正体について、まとめてみることにしました。

この記事でわかること

nav 要素の役割
nav 要素の基本的な使い方

nav 要素とは

nav は、navigation （もしくは navi ）の略だと思われます。なんとなく『案内』っぽいニュアンスだというのは日常的に使われているワードなので、容易に読み取れますよね！

もともとの意味は「航海」や「航法」みたいな感じですが、そこから転じて『経路を案内する』『移動を助ける』という感じの意味へと広がり、今では Web の世界でも「ナビゲーション」という言葉として定着していますね。

単語

navigation：【名詞】航海、航法、［インターネット］ナビゲーション（weblio）

ナビのアイコンをあえて「舵」マークにするというのもなんだか乙ですね。

ちなみに「navigation」と「navi」では前者の方が初出が早く、16世紀にはすでに英語で使われていたようです（Etymonline）。「navi」はその略語でさらに後付けで「NAVI（New Advanced Vehicle with Intelligence）」という意味がつけられた説もあるとかないとか……。GUNDAM みたいな！

読み方は『ナヴ』がポピューラーなのかな？？
別に『ナヴィ』でも伝わればどちらでもいいような気もします……！！！

nav 要素の意味

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
HTML Living Standard

原文だと回りくどい言い回しですが、『他のページへのリンク（links to other pages）』、または『そのページ内のパーツへのリンク（links to parts within the page）』を含みページのセクションを表します。後者は「ページ内リンク」のことなのかな？

要は、nav 要素は、ナビゲーションを含むセクションってことらしいです。

そのままですね笑

「ナビ」と「メニュー」の違い

ちょくちょく「ナビ」と「メニュー」という言葉が混在していて“深読み”すると混乱するので、一度、Web における、「ナビ」と「メニュー」の違いをざっくりまとめておきます！

・ナビ（ナビゲーション）：サイトやページ内を案内をするための機能全般
・メニュー：ナビの中でも“箇条書きのような UI （見た目）”のこと

ナビは『案内の仕組み』、メニューは『その見せ方（UI）』

「ナビ」は、ユーザーが目的の情報にたどり着けるような道筋を示す、広い意味での『案内の仕組み』です。「メニュー」は、『そのナビの見せ方（UI）』の１つで、たとえば、「ハンバーガーメニュー」や「プルダウンメニュー」など、箇条書き風のレイアウトに使われることが多いです。

「ナビ」というくくりに「メニュー」が含まれる

たとえば「パンくずリスト」という、よく記事やコンテンツの上にある現在のサイトの位置を示してくれるテキストがあります。この「パンくずリスト」もユーザーを案内する機能 ＝ナビの１つだと言えます。しかし、一般的な見た目は、箇条書きではなく横並びのテキストなので「メニュー」とはあまり呼ばれませんよね。

つまり……

「ナビ」という大きなくくりの中に、パンくずリストのような UI が含まれているという構図と言えます。「メニュー」も「パンくずリスト」のように UI の一種と考えると、同じように「ナビ」というくくりに「メニュー」が含まれるということがイメージできるかと思います。

とはいえ、

そんなに気にしなくてOK！

実際の現場では、「ナビ」と「メニュー」がほぼ同じ意味で使われることも多いので、神経質にこだわりすぎなくても大丈夫だと思います！グローバルナビとグローバルメニューの違いなぞ、オレンジとみかんくらいテキトウに使われれている場合がほとんどでしょう！

nav 要素の
基本的な使用例

よくある nav 要素の使い方の基本形は、ul 要素などのリストと組み合わせます。

  <nav>
   <ul>
    <li><a href="〇〇">まるまる</a></li>
    <li><a href="☓☓">ばつばつ</a></li>
    <li><a href="△△">さんかくさんかく</a></li>
   </ul>
  </nav>

特にこだわりがないのであれば、ul 要素を使うのがポピュラーだと思います。状況によって ol 要素や p 要素など使い分ければいいですね。

サイトのナビ＆ページのナビ

以下の例は、
サイト全体のナビゲーション（いわゆるグローバルナビ）とそのページ内のナビゲーション（いわゆるアンカーリンクをメニューにしたもの）を盛り込んだ例です。

<body>
 <header>
  <h1>すごい会社のホームページ</h1>
  <nav><!-- ← サイトのナビゲーション -->
   <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/information">会社情報</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
   </ul>
  </nav>
 </header>
 <main>
  <section>
   <header>
    <h2>ようこそ</h2>
    <p>ようこそ私たちのすごい会社のホームページへ！</p>
    <p>私たちは日々、とてもすごい活動をしています。</p>
   </header>
  　<nav><!-- ← ページのナビゲーション -->
    <ul>
     <li><a href="#sugoi-greeting">すごいあいさつ</a></li>
     <li><a href="#sugoi-smile">すごい笑顔</a></li>
     <li><a href="#sugoi-thanks">すごい感謝</a></li>
    </ul>
   </nav>
   <section id="sugoi-greeting">
    <h2>すごいあいさつ</h2>
    …省略…
   </section>
   <section id="sugoi-smile">
    <h2>すごい笑顔</h2>
    …省略…
   </section>
   <section id="sugoi-thanks">
    <h2>すごい感謝</h2>
    …省略…
  </section>
 </main>
 <footer>
  …省略…
 </footer>
</body>

記述方法に特筆する点は特にありませんが、上記の例が伝えたいことは『ちゃんと意味のある nav 要素であれば２つ以上あってもべつにオッケー！』ということですね！

何でもかんでも
nav 要素で囲う必要はない

リンクがあったら、nav 要素を囲わなければいけないということはありません。

大切なのは、
そのリンクが、サイトやページを案内するためのリンクであるということ。

例えば、サイト全体の構造を案内する「グローバルナビ」は、典型的な nav 要素の使いどころです。他にも、前項の例にも出てきた、目次のようなページ内の各セクションに案内するための『アンカーリンクのメニューにしたもの』や「パンくずリスト」、「関連記事リンク」や「ページネーション（前/次ページリンク）」なども nav 要素で囲うのがよいですね。

フッターで nav 要素は不要！？

フッターには、ホーム、ポリシー、会社情報などなど、いろいろなページへのリンクをまとめて載せることが多いですよね。このような場合は、nav 要素で囲わなくても問題ないようです。

どちらかといえば、“単なるサイトの補足情報”とみなされることが多いという理由なのかな？主要なナビゲーションというより『おまけリンク集』的な？

もちろん明確に“ナビゲーション”として設置しているのであれば nav 要素で囲うことも問題ではないようです。禁止されているわけではないので、使うかどうかは意図次第ですね。（公式が言うには、“不要”とのことですが……。

ちょっとおもしろい
nav 要素の使い方

nav 要素は、ul 要素や ol 要素などのリストと組み合わせるのがポピュラーですが、必ずしも“リスト要素”と組み合わせなければならないわけではありません。

下記の例のような使い方もOKです！

<nav>
 <h1>ナビゲーション</h1>
 <p>あなたは今、私のホームページにいます。
 北には<a href="/blog">ブログ</a>があり、そこからは戦いの音が聞こえてきます。
 東には大きな山がそびえ、
 その山にはたくさんの<a href="/school">学校のレポート</a>が散らばっています。
 山の上の方には、小さな人影が見えます。
 どうやら私が<a href="/school/thesis">卒業論文</a>を必死に書いているようです。</p>
 <p>西にはいくつかの出口があります。
 ひとつは楽しげな出口で、<a href="https://games.example.com/">「ゲーム」</a>と書かれています。
 もうひとつは少し退屈そうな出口で、<a href="https://isp.example.net/">ISP™</a>と書かれています。</p>
 <p>南には、じめじめとして薄暗い<a href="/about">連絡先ページ</a>があります。
 使われていない入り口にはクモの巣が張り巡らされ、ときどきネズミがページから素早く飛び出してきます。</p>
</nav>

公式で紹介されていたコードの英文を直訳したものです。（出典元：HTML Living Standard）

内容については意味不明ですが……例のように文章の中にリンクをちりばめたナビゲーション形式でも「nav 要素」として成立するというのが、この例で伝えたい大事なポイントです。

nav 要素は
Sectioning content
でも……

nav 要素は、Content models（コンテンツモデル）の概念において、Sectioning content（セクショニングコンテンツ）のカテゴリに属しています。

Sectioning content であるということは、たとえば、nav 要素の中に header 要素や footer 要素を入れると、それらはその nav 要素専用の“ヘッダー、フッター”と解釈される、ということになります。

でも……
実際には、nav 要素の中に、header 要素や footer 要素を入れることは少なく、単にリンクのリストなどを入れるだけの場合が多いようです。

そして、
h1-h6 要素といった見出しも、必ずしも入れる必要はありません。

過去の HTML5 では、Sectioning content に h1-h6 要素（見出し）を入れて「アウトライン」を形成するという構想がありましたが、現在の HTML Living Standard では、あまり重視されていないようです。そのため、そのようなクラシカルな作法は、特に nav 要素については、気にしなくてもOKです！必要に応じて判断しましょう。

【HTML5】コンテンツモデルについて調べてみた

まとめ

nav 要素は、サイトやページを案内するためのリンクを囲う要素です。サイト全体の構造を案内する「グローバルナビ」はもちろん、「パンくずリスト」や「関連記事リンク」、「ページネーション（前/次ページリンク）」なども nav 要素で囲ったりする使い方ができます。

フッターにあるいろいろなページへのリンクに対しては基本的に nav 要素は不要です。そして、フッター以外にもさまざまなリンクに対して、何でもかんでも nav 要素で囲う必要はありません。大切なのはサイトやページを案内するためのリンクであるという意味付けです。

参考・出典

・HTML Living Standard. 「4.3.4 The nav element」. https://html.spec.whatwg.org/#the-nav-element, 2025年5月6日閲覧。

・MDN. 「<nav>: ナビゲーションセクション要素」. https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/nav, 2025年5月6日閲覧。

・weblio. 「navigationとは意味・読み方・使い方」. https://ejje.weblio.jp/content/navigation, 2025年5月6日閲覧。

・weblio. 「naviとは意味・読み方・使い方」. https://ejje.weblio.jp/content/navi, 2025年5月6日閲覧。

・Etymonline. 「Origin and history of navigation」. https://www.etymonline.com/word/navigation, 2025年5月6日閲覧。