【HTML】navタグの意味と使い方のコツを３分でわかりやすく解説

Webサイトにおけるナビゲーションの役割を果たす<nav>タグについて解説します。

ナビゲーションとは、当サイトでいう↓の部分のことです。

<nav>タグはHTMLの要素の１つで、メインのナビゲーション部分をマークアップするために使用されます。例えば、以下のように利用します。

<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>

<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>

<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>

参考　ulタグ（リスト） / aタグ（リンク）

上記は非常にシンプルな例ですが、<nav>タグを適切に利用することでWebサイトの使いやすさやアクセシビリティを大幅に向上させることが可能としつつ、SEO（検索エンジン最適化）にも寄与します。検索エンジンは<nav>タグを使用してページ内の重要なナビゲーション部分を理解し、その情報を使ってウェブサイトのランキングを決定します。

このページでは、この<nav>タグの意味と、その使い方について詳しく解説します。基本的な使用例からより高度な使用方法までをカバーし、あなたが<nav>タグを効果的に活用するための手助けとなるでしょう。

このページで学べる内容

navタグとは何か（定義と役割）
navタグの使用例

Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

参考　HTMLの基本構文ルールを３分で学習

HTML：navタグとは
1. navタグの使用例
HTML <nav>タグのまとめ

HTML：navタグとは

<nav>タグは、HTML5で導入されたセマンティック（意味的な）要素の一つです。

参考　セマンティックHTMLとは？

<nav>タグは、ページ内またはページ間の主要なナビゲーションリンクを囲むために使用されます。基本的な構造は以下の通り。

<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>

<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>

<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>

↑のコードでは、<nav>タグで囲まれた部分がナビゲーションエリアを表しています。その内部には<ul>タグと<li>タグが存在しており、各リスト項目には、<a>タグ（アンカー）が使用されており、これが各セクションへのリンクを表現しています。

注意点として、<nav>タグは主要なナビゲーションに限定され、すべてのリンクグループに使用するわけではないということを覚えておきましょう。例えば、フッターのリンクやサイドバーのリンクなど、サイト内の他の部分にあるリンクをマークアップする際に必ずしも<nav>タグを使用する必要があるわけではありません。

例えば、当サイトでは↓の部分にのみ<nav>タグを利用しており、その他のリンクには<nav>タグを利用してはいません。

ものすごくざっくり言うと、navタグはこのページで重要なナビゲーションがここだよ！というのを表すために利用されるタグだということです。

そもそも・・・「ナビゲーション」とは？

「ナビゲーション」とは、一般的に、ある地点から別の地点へ移動するための指示や手段を指す言葉。Webデザインの文脈では、「ナビゲーション」はWebサイト内を移動するための手段、具体的にはリンクやメニューなどのユーザーインターフェース要素を指します。

具体的には、Webサイトのナビゲーションには以下のような要素が含まれることが一般的です。

メインメニュー: Webサイトの主要なセクションやページへのリンクを提供。通常、サイトのヘッダー部分に配置されます。
フッターメニュー: 追加の情報、例えばプライバシーポリシー、利用規約、お問い合わせ情報などへのリンクを提供。
ブレッドクラム(パンくずリスト): 現在のページがサイト内のどの位置にあるのかを示すためのナビゲーションパス。
サイドバー: 特定のページやセクション内のサブメニューや関連リンクを提供。

中でも、<nav>タグはメインメニューのような主要なリンクグループに利用されるものだということを覚えておきましょう。

navタグの使用例

<nav>タグを使ったナビゲーションの基本的な使用例を見てみましょう。

以下の例は、サイトのメインメニューを<nav>タグでマークアップする一般的なパターンです。

<nav>

<ul>

<li><a href="about.html">私たちについて</a></li>

<li><a href="contact.html">お問い合わせ</a></li>

</ul>

</nav>

<nav> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="about.html">私たちについて</a></li> <li><a href="services.html">サービス</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul> </nav>

<!-- コメント：メインメニュー -->
<nav>
  <ul>
    <li><a href="index.html">ホーム</a></li>
    <li><a href="about.html">私たちについて</a></li>
    <li><a href="services.html">サービス</a></li>
    <li><a href="contact.html">お問い合わせ</a></li>
  </ul>
</nav>

この例では、<nav>タグはWebサイトの主要なナビゲーションエリアを表現しています。書き方としては、HTMLの基本を押さえていれば決して難しいものではないと思います。

以下が<nav>タグを利用した場合のHTMLファイル全体のコードです。

サンプルコード　ナビゲーション

<!DOCTYPE html>

<head>

<title>Navタグのサンプル</title>

<style>

body {

font-family: Arial, sans-serif;

}

nav {

background-color: #f8f9fa;

padding: 10px;

margin-bottom: 20px;

}

nav ul {

list-style: none;

padding: 0;

}

nav ul li {

display: inline;

margin-right: 10px;

}

nav ul li a {

color: #333;

text-decoration: none;

}

nav ul li a:hover {

text-decoration: underline;

}

</style>

</head>

<body>

<nav>

<ul>

<li><a href="about.html">私たちについて</a></li>

<li><a href="contact.html">お問い合わせ</a></li>

</ul>

</nav>

<main>

</main>

</body>

</html>

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Navタグのサンプル</title>  <style> body { font-family: Arial, sans-serif; } nav { background-color: #f8f9fa; padding: 10px; margin-bottom: 20px; } nav ul { list-style: none; padding: 0; } nav ul li { display: inline; margin-right: 10px; } nav ul li a { color: #333; text-decoration: none; } nav ul li a:hover { text-decoration: underline; } </style> </head> <body>  <nav> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="about.html">私たちについて</a></li> <li><a href="services.html">サービス</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul> </nav> <main>  </main> </body> </html>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Navタグのサンプル</title>
    <!-- コメント：スタイルの定義 -->
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        nav {
            background-color: #f8f9fa;
            padding: 10px;
            margin-bottom: 20px;
        }
        nav ul {
            list-style: none;
            padding: 0;
        }
        nav ul li {
            display: inline;
            margin-right: 10px;
        }
        nav ul li a {
            color: #333;
            text-decoration: none;
        }
        nav ul li a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <!-- コメント：メインメニュー -->
    <nav>
        <ul>
            <li><a href="index.html">ホーム</a></li>
            <li><a href="about.html">私たちについて</a></li>
            <li><a href="services.html">サービス</a></li>
            <li><a href="contact.html">お問い合わせ</a></li>
        </ul>
    </nav>

    <main>
        <!-- コメント：ここにメインコンテンツが入ります -->
    </main>
</body>
</html>

ナビゲーション<nav> サンプル — 図2：ナビゲーション<nav>のサンプル

↑のHTMLファイルでは、<style>タグを使って<nav>タグのスタイリングを行っています。特に、<nav>要素の背景色を変更し、リンクにマウスオーバーしたときに下線が表示されるようにしています。

HTML <nav>タグのまとめ

意味： <nav>タグは、HTML5で導入されたセマンティックな要素の１つ。Webページ内の主要なナビゲーションブロックを示します。
使用方法： <nav>タグは主にWebサイトのヘッダーやフッター、サイドバーなどに使用され、ページ間を移動するためのリンクを提供します。
主要なナビゲーションに限定： <nav>タグは主要なナビゲーションに限定され、すべてのリンクグループに使用するものではありません。

<nav>

<ul>

<li><a href="about.html">私たちについて</a></li>

<li><a href="contact.html">お問い合わせ</a></li>

</ul>

</nav>

<!-- コメント：メインメニュー -->
<nav>
  <ul>
    <li><a href="index.html">ホーム</a></li>
    <li><a href="about.html">私たちについて</a></li>
    <li><a href="services.html">サービス</a></li>
    <li><a href="contact.html">お問い合わせ</a></li>
  </ul>
</nav>