nav « webmas.jp

nav

<nav> はサイトのナビゲーションを示します。主にメニュー、目次、索引といったものを含みます。ヘッダー内で利用し <ul> を子要素として配置しリスト化するのが一般的です。

分類: フローコンテンツ、区分コンテンツ、知覚可能コンテンツ
内包できるもの: フローコンテンツ

属性

グローバル属性のみ

サンプル

<nav> は例えば以下のようなナビゲーションに使用されることが考えられます。

グローバルナビゲーション
ページ内ナビゲーション
トピックパス（パンくずリスト）
トップへ戻るボタン

<header>
<h1>サイト名</h1>
<nav>
<ul>
	<li><a href="index.html">Home</a></li>
	<li><a href="news.html">お知らせ</a></li>
	<li><a href="contact.html">お問合せ</a></li>
</ul>
</nav>
</header>

<main>
<article>
<h2>記事見出し</h2>
<nav>
<ul>
	<li><a href="#section01">見出し1</a></li>
	<li><a href="#section02">見出し2</a></li>
	<li><a href="#section03">見出し3</a></li>
</ul>
</nav>

<section id="section01">
<h3>見出し1</h3>
<p>内容</p>
</section>

<section id="section02">
<h3>見出し2</h3>
<p>内容</p>
</section>

<section id="section03">
<h3>見出し3</h3>
<p>内容</p>
</section>
</article>
</main>

<footer>
<ul>
	<li><a href="index.html">Home</a></li>
	<li><a href="news.html">お知らせ</a></li>
	<li><a href="contact.html">お問合せ</a></li>
</ul>
</footer>

注意点

フッター内にもサイトマップやナビゲーションが配置されることが多いですが、必ずしも <nav> を使う必要は無いようです。