HTML navをheader内に置くのは正解？配置の考え方を初心者向けに解説

HTML navをheader内に置くのは正解？配置の考え方

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

生徒

「Webサイトを作るとき、navタグってheaderの中に入れるものなんですか？」

先生

「多くの場合は正解ですが、必ずしもすべてがそうとは限りません。役割で考えるのが大切です。」

生徒

「見た目で上にあるからheader、ではダメなんですね？」

先生

「その通りです。意味を意識するとHTMLの理解が一気に深まりますよ。」

1. headerタグの役割を理解しよう

headerタグは、ページやセクションの冒頭部分を表すためのHTMLタグです。サイトのロゴやタイトル、導入的な情報をまとめる場所として使われます。紙のチラシでいうと、いちばん上にある見出し部分のような存在です。

2. navタグは何を表すのか

navタグは、ページ内外を移動するためのナビゲーションを表します。トップページへのリンクやカテゴリ一覧など、利用者が次に進むための道しるべをまとめる役割があります。移動が目的である点が最大の特徴です。

3. header内にnavを置くのが多い理由

多くのWebサイトでは、最初に目に入る場所にメニューがあります。そのため、headerの中にnavを配置する構造が一般的です。ロゴとメニューを一緒にまとめることで、ページの入口として分かりやすい構造になります。


<header>
    <h1>サイトタイトル</h1>
    <nav>
        <ul>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">サービス</a></li>
            <li><a href="#">お問い合わせ</a></li>
        </ul>
    </nav>
</header>

ブラウザ表示

4. headerの外にnavを置くケース

すべてのnavがheader内にある必要はありません。記事の途中にある目次や、フッター部分のリンク集などは、headerとは別に配置されることが多いです。役割が異なれば、置き場所も変わります。


<main>
    <article>
        <h2>記事タイトル</h2>
        <nav>
            <ul>
                <li><a href="#">見出し1</a></li>
                <li><a href="#">見出し2</a></li>
            </ul>
        </nav>
        <p>記事本文が続きます。</p>
    </article>
</main>

ブラウザ表示

5. 見た目ではなく意味で判断する

HTMLのタグは、見た目を決めるものではなく意味を伝えるためのものです。上に表示されているからheader、リンクがあるからnavと決めつけず、「これは何のための情報か」を考えることが重要です。

6. headerとnavの入れ子構造の考え方

headerの中にnavを入れることは問題ありませんが、navの中にheaderを入れるのは不自然です。大きな箱がheaderで、その中に案内板としてnavがあるイメージを持つと理解しやすくなります。


<header>
    <div class="logo">LOGO</div>
    <nav>
        <ul>
            <li><a href="#">会社情報</a></li>
            <li><a href="#">ブログ</a></li>
        </ul>
    </nav>
</header>

ブラウザ表示