<nav> - ナビゲーション

• トップ
• HTMLリファレンス
• <nav>

• 概要
• 説明
• 属性
• 使用例
  • 左メニューの例
  • パンくずリストの例
• リンク

概要

形式

<nav>～</nav>

サポート

https://caniuse.com/mdn-html_elements_nav

カテゴリ

フローコンテンツ

セクショニングコンテンツ

パルパブルコンテンツ

親要素

フローコンテンツ を子要素に持てるもの

子要素

フローコンテンツ(ただし、main 要素を子孫に持つことはできない)

タグの省略

開始タグ:必須 / 終了タグ:必須

属性

グローバル属性

説明

左メニューやパンくずリストなど、他のページやページ内のポジションへのナビゲーション情報を記述します。

属性

グローバル属性

詳細は グローバル属性 を参照してください。

使用例

左メニューの例

<nav class="menu">
  <ul>
    <li><a href="/menu1">メニュー1</a></li>
    <li><a href="/menu2">メニュー2</a></li>
    <li><a href="/menu3">メニュー3</a></li>
  </ul>
</nav>

パンくずリストの例

.my-breadcrumb { margin: 0; padding: 0; }
.my-breadcrumb li { display: inline; }
.my-breadcrumb li:not(:last-of-type)::after { content: " / "; }

<nav>
  <ul class="my-breadcrumb">
    <li><a href="/">Top</a></li>
    <li><a href="/html">HTML</a></li>
    <li>nav</li>
  </ul>
</nav>

リンク

• https://html.spec.whatwg.org/multipage/sections.html#the-nav-element
• https://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-nav-element
• https://developer.mozilla.org/ja/docs/Web/HTML/Element/nav
• https://caniuse.com/#search=New%20semantic%20elements