nav要素

nav要素はページ内の他のページやパーツにリンクするページのナビゲーションリンクのセクションを表します。

例)

<body>
<header>
<h1>ドキュメントタイトル</h1>
<p><a href="xxxxx.html">News</a> -<a href="xxxxx.html">Blog</a> -<a href="xxxxx.html">Forums</a></p>
<p>Last Modified:20XX-XX-XX</span></p>
<nav>
<h2>Navigation</h2>
<ul>
<li><a href="xxxxx.html">All Entries</a></li>
<li><a href="xxxxx.html">Entry 1</a></li>
<li><a href="xxxxx.html">Entry 2</a></li>
</ul>
</nav>
</header>

<main>
<article>
<header>
<h2>記事タイトル</h2>
</header>
<div>
<p>内容</p>
<p>内容</p>
</div>

<footer>
<p>Posted 20XX-XX-XX</p>
</footer>
</article>
...more blog posts...
</main>

<footer>
<p>Copyright c 2014 The Example Company</p>
<p><a href="xxxxx.html">About</a> -<a href="xxxxx.html">Privacy Policy</a> -<a href="xxxxx.html">Contact Us</a></p>
</footer>
</body>

上記のHTMLドキュメント


例2)

<body>
<h1>サイトタイトル</h1>
<nav>
<ul>
<li><a href="xxxxx.html">Home</a></li>
<li><a href="xxxxx.html">New Entry</a></li>
...more...
</ul>
</nav>

<main>
<header>
<h2>Entries</h2>
<p>Written by XXXXX.XXXXX</p>
</header>

<nav>
<ul>
<li><a href="#entry_1">Entry 1</a></li>
<li><a href="#entry_2">Entry 2</a></li>
...more...
</ul>
</nav>

<div>
<section id="entry_1">
<h2>Entry 1</h2>
<p>...more...</p>
</section>

<section id="entry_2">
<h2>Entry 2</h2>
<p>...more...</p>
</section>
</div>

<footer>
<p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
</footer>
</main>

<footer>
<p><small>c copyright 1998 The Example Company</small></p>
</footer>
</body>

上記のHTMLドキュメント

なお、nav要素のコンテンツが、項目のリストを表している場合は、リストのマークアップを使用することが推奨されています。

また、ページ上のリンクのすべてのグループがnav要素である必要はありません。

nav要素は、主に主要なナビゲーションのブロックで構成されるセクションを対象としています。たとえば、フッターで、サービスの利用条件や、ホームページ、および著作権のページなど、サイトの様々なページへのリンクの短いリストを持つ場合では、nav要素よりも、footer要素を使うことが推奨されています。

カテゴリ
フロー・コンテンツセクショニング・コンテンツパルパブル・コンテンツ
要素を使用することができる場所
フロー・コンテンツが使用できる場所。
コンテンツ モデル(内容に含めることのできる要素)
フロー・コンテンツmain要素を除きます。)
コンテンツ属性
グローバル属性