nav・aside でページ構造を整理する方法｜初心者向けにわかりやすく解説

HTML5 ではページ構造をわかりやすく整理するために、nav（ナビゲーション） と aside（補足情報） という2つのセマンティックタグが導入されました。

どちらも「ページの全体構造を綺麗にする」重要タグですが、役割・使う場所・使い分けを理解することが大切です。

この記事では、
nav と aside の役割・使い方・レイアウト例・注意点 を
初心者向けにやさしく解説します。

navタグとは？

nav（navigation）タグは「ページ内の主要な移動リンク」であることを示すタグ。

<nav>
  <ul>
    <li><a href="/html-course/">HTML講座</a></li>
    <li><a href="/css-course/">CSS講座</a></li>
    <li><a href="/tools/">ツール集</a></li>
  </ul>
</nav>

nav は何のためにある？

ユーザーが迷わず移動するため
検索エンジンに「主要メニュー」を知らせるため
読み上げソフトが自動で “ナビゲーション” と認識する

navタグはどこに使う？

主な用途は以下の通り：

サイトのメインメニュー（最も一般的）

<header>
  <nav> … </nav>
</header>

サイドバーのメニュー

<aside>
  <nav>…</nav>
</aside>

記事ページの「目次」

※ HTMLでは nav として扱ってOK

<nav class="toc">
  <ul>
    <li><a href="#h2-1">見出し1</a></li>
    <li><a href="#h2-2">見出し2</a></li>
  </ul>
</nav>

asideタグとは？

aside（補足・サイド情報）タグは、本文とは直接関係しない “補足的な情報” をまとめるタグ。

<aside>
  <h2>プロフィール</h2>
  <p>KEN-BLOGの運営者です。</p>
</aside>

aside は何のためにある？

「本文には必須ではない情報」を示す
読み上げソフトや検索エンジンに “補足” であることを伝える
デザイン的にもサイドバー用途で使われる

asideタグはどこに使う？

サイドバー（最も一般的）

ブログではよく以下のような用途で使われます：

プロフィール
人気記事
カテゴリ一覧
広告
おすすめリンク

記事中の補足情報

<aside>
  <p>※ この設定は環境によって異なります。</p>
</aside>

補足メモ・注意・広告枠

本文から外れる情報は aside が適切です。

nav と aside の違い

タグ	役割	主な用途
nav	ページ内の “主要な移動リンク”	グローバルメニュー、目次
aside	本文とは直接関係しない “補足情報”	サイドバー、注意書き、広告

✔ nav → リンクの集合

✔ aside → 補足情報のまとまり

この違いを理解するとページ構造が一気にわかりやすくなります。

nav・aside を使ったページ構造例（実用コード）

ページ構造全体の例

<body>

  <header>
    <h1>KEN-BLOG</h1>
    <nav>
      <ul>
        <li><a href="/html-course/">HTML講座</a></li>
        <li><a href="/css-course/">CSS講座</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>HTML講座：nav と aside の使い方</h2>
      <p>本文が入ります…</p>

      <aside>
        <p>※ 補足情報：関連リンクはこちら</p>
      </aside>

    </article>
  </main>

  <aside class="sidebar">
    <h2>カテゴリ</h2>
    <ul>
      <li><a href="/html-course/">HTML講座</a></li>
      <li><a href="/css-course/">CSS講座</a></li>
    </ul>
  </aside>

  <footer>
    <p>&copy; 2025 KEN-BLOG</p>
  </footer>

</body>

✔ nav は “移動リンク”

✔ aside は “補足情報”

この違いを意識するだけで、HTMLがより意味的に正しくなります。

よくある間違い

nav に本文を入れる

nav はリンク専用です。

aside に主要コンテンツを入れる

aside は補足なので、本体の内容は main 内へ。

デザイン目的で nav・aside を乱用

見た目のためだけなら div でOK。
nav・aside はあくまで “意味タグ”。

まとめ

nav → 主要な移動リンクの集合
aside → 補足的な情報のまとまり
nav：サイト内メニュー・目次など
aside：サイドバー・補足メモ・広告
デザイン目的なら div、意味付けるときは nav / aside を使用
適切に使うと SEO とアクセシビリティが向上

著者からのひと言

nav と aside は、ページの構造を整理するためのとても便利なタグです。
特にWordPressブログでは「メニュー＝nav」「サイドバー＝aside」が自然と使われているので、意味を理解するだけでコードが一段と読みやすくなります。
ぜひ意識して使ってみてください！

次回の記事は「figure・figcaptionの正しい使い所」です。

各講座のトップページはこちら

この記事が役に立ったら、いいね！お願いします！