HTML navタグを使いこなす！グローバルとローカルの考え方を初心者向けに解説

HTML navは複数使ってよい？グローバル・ローカルの考え方

先生と生徒の会話形式で理解しよう

生徒

「先生、HTMLのnavタグって一つのページに一つしか使えないんですか？」

先生

「いいえ、navタグは複数使っても大丈夫です。ページ全体のナビゲーションと、特定のセクションだけのナビゲーションを分けて使うことができます。」

生徒

「特定のセクションだけのナビゲーションってどういうことですか？」

先生

「ページの上部にあるメニューはグローバルナビゲーション、記事の中やサイドバーにあるリンクはローカルナビゲーションと呼びます。それぞれの目的に合わせてnavタグを使い分けます。」

1. HTML navタグとは何か？

HTMLのnavタグは、ページ内のナビゲーションリンクをまとめるためのタグです。ユーザーがページ内を移動しやすくする役割があります。例えば、ヘッダーのメニューやサイドバーのリンクリストなどがnavタグで囲まれます。

navタグを使うことで、検索エンジンにも「ここがナビゲーションです」と伝えることができ、SEO対策にも役立ちます。

2. navタグは複数使えるのか？

navタグは複数使用可能です。一つのページにグローバルナビゲーションとローカルナビゲーションを別々に置くことで、ユーザーの操作性が向上します。


<header>
    <nav>
        <ul>
            <li><a href="/">ホーム</a></li>
            <li><a href="/about">会社情報</a></li>
            <li><a href="/contact">お問い合わせ</a></li>
        </ul>
    </nav>
</header>
<article>
    <h2>記事タイトル</h2>
    <nav>
        <ul>
            <li><a href="#section1">見出し1へ</a></li>
            <li><a href="#section2">見出し2へ</a></li>
        </ul>
    </nav>
</article>

ブラウザ表示

3. グローバルナビゲーションとは

グローバルナビゲーションは、サイト全体で共通して表示されるナビゲーションです。ページの上部やヘッダーに置かれることが多く、ユーザーがどのページにいてもアクセスできます。

SEO的にも重要で、内部リンク構造を検索エンジンに伝えやすくなります。


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

ブラウザ表示

4. ローカルナビゲーションとは

ローカルナビゲーションは、特定のページやセクション内で使われるナビゲーションです。例えば、記事の目次やサイドバーの関連リンクがこれにあたります。

ユーザーがページ内をスムーズに移動できるようにする役割があります。


<aside>
    <nav>
        <ul>
            <li><a href="#introduction">はじめに</a></li>
            <li><a href="#usage">使い方</a></li>
            <li><a href="#examples">例</a></li>
        </ul>
    </nav>
</aside>

ブラウザ表示

5. navタグのアクセシビリティ対応

navタグを正しく使うと、スクリーンリーダーがナビゲーション部分を認識しやすくなります。ユーザーがキーボードだけで操作するときも、navで囲まれたリンクを効率的に移動できます。

aria-label属性を使えば、「グローバルナビゲーション」「目次ナビゲーション」など目的を明示できます。


<nav aria-label="グローバルナビゲーション">
    <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/about">会社情報</a></li>
    </ul>
</nav>

ブラウザ表示

6. navタグのSEO効果

navタグで囲まれたリンクは、検索エンジンに「重要な内部リンク」として認識されます。グローバルナビゲーションは全ページ共通リンクとしてサイト全体の構造を伝え、ローカルナビゲーションはページ内の重要なコンテンツに誘導できます。

これにより、検索エンジンがサイトの構造を理解しやすくなり、SEO効果が高まります。


<header>
    <nav>
        <ul>
            <li><a href="/">ホーム</a></li>
            <li><a href="/products">商品一覧</a></li>
            <li><a href="/contact">お問い合わせ</a></li>
        </ul>
    </nav>
</header>
<main>
    <section>
        <nav aria-label="記事目次">
            <ul>
                <li><a href="#feature1">特徴1</a></li>
                <li><a href="#feature2">特徴2</a></li>
            </ul>
        </nav>
    </section>
</main>

ブラウザ表示

7. 複数navタグを使うときの注意点

複数のnavタグを使う場合、目的をはっきりさせましょう。グローバルナビゲーションはサイト全体で共通、ローカルナビゲーションはそのページ内でのみ使います。

また、同じページ内でnavタグが多すぎると、ユーザーや検索エンジンが混乱する可能性があるので、必要な範囲で使うことがポイントです。

8. 実際のHTML構造例

実際にグローバルとローカルナビゲーションを組み合わせたページの例です。


<header>
    <nav>
        <ul>
            <li><a href="/">ホーム</a></li>
            <li><a href="/about">会社情報</a></li>
            <li><a href="/services">サービス</a></li>
            <li><a href="/contact">お問い合わせ</a></li>
        </ul>
    </nav>
</header>
<main>
    <article>
        <h2>記事タイトル</h2>
        <nav aria-label="記事目次">
            <ul>
                <li><a href="#section1">セクション1</a></li>
                <li><a href="#section2">セクション2</a></li>
                <li><a href="#section3">セクション3</a></li>
            </ul>
        </nav>
        <p>ここから記事の本文が始まります。各セクションの見出しにリンクを付けることで、ユーザーが読みたい部分にすぐアクセスできます。</p>
    </article>
</main>
<footer>
    <p>&copy; 2026 サンプルサイト</p>
</footer>

ブラウザ表示

まとめ

HTMLのnavタグについて、今回は初心者向けにグローバルナビゲーションとローカルナビゲーションの違いや使い分け、アクセシビリティやSEOへの影響まで詳しく解説しました。navタグは、単にリンクをまとめるだけでなく、ページの構造を明確に伝える役割があります。グローバルナビゲーションはサイト全体で共通のリンクを提供し、ローカルナビゲーションは特定のページやセクション内でユーザーを目的の場所に誘導する重要な役割を担います。これにより、ユーザーが迷わずページ内を移動でき、検索エンジンも効率的にサイトの構造を理解できるようになります。

複数のnavタグを使う際には、目的を明確にし、必要最小限に留めることが大切です。例えば、ヘッダーのグローバルナビゲーションには主要ページへのリンクをまとめ、記事内やサイドバーのローカルナビゲーションには該当コンテンツへのリンクを設置します。また、aria-label属性を活用して、スクリーンリーダーなどの支援技術でも正しくナビゲーションを理解できるようにすることが推奨されます。

実際のHTML構造では、header内にグローバルナビゲーションを配置し、articleやsection内にローカルナビゲーションを設置するのが基本的なパターンです。こうすることで、ユーザー体験が向上し、検索エンジンも内部リンク構造を理解しやすくなります。コード例を参考に、クラス名や構造を統一して使うことで、保守性の高いナビゲーション設計が可能です。

 <header> <nav aria-label="グローバルナビゲーション"> <ul> <li><a href="/">ホーム</a></li> <li><a href="/about">会社情報</a></li> <li><a href="/services">サービス</a></li> <li><a href="/contact">お問い合わせ</a></li> </ul> </nav> </header> <main> <article> <h2>記事タイトル</h2> <nav aria-label="記事目次"> <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>

ブラウザ表示

先生と生徒の振り返り会話

生徒

「先生、navタグを使い分けるとユーザーも検索エンジンも分かりやすくなるんですね？」

先生

「その通りです。グローバルナビゲーションで全体構造を伝え、ローカルナビゲーションでページ内の詳細な部分に誘導することで、ユーザーも迷わず目的の情報に辿り着けます。」

生徒

「aria-labelを使うとスクリーンリーダーでもちゃんとナビゲーションが分かるんですよね？」

先生

「そうです。アクセシビリティを意識することで、すべてのユーザーがページを使いやすくなります。SEOの観点からも、内部リンクの構造を正確に検索エンジンに伝えられる効果があります。」

生徒

「なるほど。つまり、複数のnavタグは目的をはっきりさせて使うことがポイントなんですね。」