4.

HTML nav 要素の使い方(主要ナビゲーションを示すセマンティック要素・aria-label / SEO 解説)

編集
この記事の要点
  • 使い所: グローバルナビ / パンくず / 目次 (TOC) / ページネーション
  • フッターの利用規約リンクなどすべてのリンクを nav で囲む必要はない — 主要なものに限定
  • 複数の nav を置く場合は aria-label または aria-labelledby で役割を区別する
  • スクリーンリーダーは nav をランドマークとして読み上げ、利用者は領域単位でジャンプできる — アクセシビリティ向上
  • 関連: セクション要素 / header 要素

nav 要素とは

nav 要素は HTML5 で追加されたセマンティック要素で、ナビゲーションリンクを含むセクションであることを明示します。グローバルナビゲーション、サイドメニュー、パンくず、目次、ページネーションなど「ユーザーを別ページ・別セクションに案内するためのリンク群」を囲むために使います。

div で囲んでも見た目は同じですが、nav にすることでブラウザ・スクリーンリーダー・検索エンジンが「ここはナビ領域」と認識し、アクセシビリティと SEO の両面で意味を持ちます。

基本構文

典型的にはリストでマークアップし、CSS で横並びやドロワーに整形します。

主な利用パターン

パターン説明aria-label の例
グローバルナビサイト全体のメインメニュー"global"
パンくず (breadcrumb)現在地までの階層リンク"breadcrumb"
サイドナビカテゴリ別の下層リンク"sidebar"
目次 (TOC)長文記事の見出し一覧"toc"
ページネーション1, 2, 3, ... のページ送り"pagination"
フッターナビフッター内のメインリンク"footer"

複数の nav を区別する

1 ページに nav が複数あるとスクリーンリーダーが「nav, nav, nav...」と読んでしまい区別できません。aria-label または aria-labelledby で役割を明示しましょう。



nav を使うべきでない例

  • フッターのコピーライト・利用規約・プライバシーリンクだけのまとまり — 主要ナビではないので不要
  • 記事本文中の「関連リンク」 — aside の方が適切な場合が多い
  • ロゴをトップに戻すための単一リンク — nav で囲む必要なし
  • ソーシャルアイコン群 — ul + aside / div で十分

WHATWG 仕様は「主要 (major) なナビゲーションブロックのみ」と明記しています。すべてのリンク集合に nav をつける必要はありません。

パンくずでの典型実装

Schema.org の BreadcrumbList を付与すると、Google の検索結果にパンくずが表示されやすくなります。

アクセシビリティ上のメリット

  • スクリーンリーダーは nav をランドマークとして扱い、利用者が領域単位でジャンプ可能
  • JAWS / NVDA の「ナビゲーションリンク一覧」コマンドで nav 内のリンクだけ抽出できる
  • キーボード利用者にも領域の切り替えが伝わる

SEO の観点

Google は HTML5 セマンティック要素を解析に利用しており、nav 内のリンクは「ナビゲーション系」と認識されます。直接の順位ブーストは公表されていませんが、構造化されたページはクロール効率・ユーザー行動指標の両面で有利と考えられます。

関連要素

要素役割
ページや section の冒頭領域(ロゴ + nav を入れることが多い)
ページや section の末尾領域
本文から離れた補足(サイドバーの「関連記事」など)
そのページの主たるコンテンツ(nav は main の外が一般的)

モバイルメニュー(ハンバーガー)の実装パターン

近年の Web サイトでは、画面幅が狭い場合に nav を折りたたんでハンバーガーアイコンで開閉するのが標準です。アクセシビリティを担保するには次の要素が必要。

  • ボタン側に aria-expanded(展開状態)と aria-controls(対応する nav の id)を付与
  • nav 側には非表示時 hidden 属性または display:none を付け、スクリーンリーダーから隠す
  • キーボードのみで操作できるように、ハンバーガーボタンを
  • Esc キーで閉じる JS をつけると親切

nav の入れ子は OK か

WHATWG 仕様上、nav の中に nav を入れることは禁止されていません。とはいえ意味的に混乱するため、1 ページ内で複数の nav を並列に置く方が一般的です。サイドナビをグローバルナビの内側に書きたくなった場合は、入れ子ではなく独立した nav として並べましょう。

FAQ

Q: nav 内に ul を必ず使う?
A: 必須ではない。div + a でも良いが、リンク集合はリスト構造が論理的に正しい。

Q: nav にも heading(h1〜h6)を入れていい?
A: 入れて良い。「メニュー」「目次」など、ナビの主題を見出しで示すと aria-labelledby と組み合わせやすい。

Q: モバイルのハンバーガーメニューも nav?
A: 中身がグローバルナビなら nav で囲む。aria-expanded / aria-controls で展開状態を持たせるのが定番。

関連: HTML セクション要素 / header 要素

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. section要素
  2. article要素
  3. aside要素
  4. nav要素

最近更新/作成されたページ