<nav> - ナビゲーション
目次
概要
- 形式
<nav>
~</nav>
- サポート
- https://caniuse.com/mdn-html_elements_nav
- カテゴリ
- フローコンテンツ
- セクショニングコンテンツ
- パルパブルコンテンツ
- 親要素
- フローコンテンツ を子要素に持てるもの
- 子要素
- フローコンテンツ(ただし、main 要素を子孫に持つことはできない)
- タグの省略
- 開始タグ:必須 / 終了タグ:必須
- 属性
- グローバル属性
説明
左メニューやパンくずリストなど、他のページやページ内のポジションへのナビゲーション情報を記述します。
属性
使用例
左メニューの例
HTML
<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>
パンくずリストの例
CSS
.my-breadcrumb { margin: 0; padding: 0; } .my-breadcrumb li { display: inline; } .my-breadcrumb li:not(:last-of-type)::after { content: " / "; }
HTML
<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
Copyright (C) 2011-2017 杜甫々
初版:2011年6月12日 最終更新:2017年12月31日
https://www.tohoho-web.com/html/nav.htm