nav 要素
4.4.3 nav 要素
- カテゴリー
- フロー・コンテンツ
- セクショニング・コンテンツ
formatBlock候補- この要素を使うことができるコンテキスト：
- フロー・コンテンツが期待される場所
- コンテンツ・モデル：
- フロー・コンテンツ
- コンテンツ属性：
- グローバル属性
- DOMインタフェース：
HTMLElementを使う。
nav 要素は、他のページやそのページ内の部分へリンクするページのセクション、つまりナビゲーション・リンクを伴うセクションを表します。
ページ上のすべてのリンクのグループが nav 要素の中にある必要はありません。主要なナビゲーション・ブロックからなるセクションだけが、nav 要素に適しています。とりわけ、サービス規約、ホーム、著作権ページといったサイトのさまざまなページへのリンクの簡単なリストをフッターに入れることが一般的ですが、このような場合においては、footer 要素だけで十分です。このような場合にも nav 要素を使うことができますが、通常は意味がありません。
ユーザーエージェント（スクリーンリーダーなど）には、特定のユーザーを対象としたものがあります。このようなユーザーエージェントは、ナビゲーション情報を当初はレンダリングしないかもしれません。このユーザーは、そういった情報から何かしらの方法で恩恵を受けることができるでしょう。このようなユーザーエージェントは、ページのどのコンテンツを当初スキップするのか、そして、どのコンテンツを提供するのかを確定する手段として、この要素を使うことが考えられます。
次の例では、ページに、リンクが存在する場所がいくつかあります。しかし、それらの場所のひとつだけを、ナビゲーションのセクションとしています。
<body>
<header>
<h1>Wake up sheeple!</h1>
<p><a href="news.html">News</a> -
<a href="blog.html">Blog</a> -
<a href="forums.html">Forums</a></p>
<p>Last Modified: <time>2009-04-01</time></p>
<nav>
<h1>Navigation</h1>
<ul>
<li><a href="articles.html">Index of all articles</a></li>
<li><a href="today.html">Things sheeple need to wake up for today</a></li>
<li><a href="successes.html">Sheeple we have managed to wake</a></li>
</ul>
</nav>
</header>
<div>
<article>
<header>
<h1>My Day at the Beach</h1>
</header>
<div>
<p>Today I went to the beach and had a lot of fun.</p>
...more content...
</div>
<footer>
<p>Posted <time pubdate="" datetime="2009-10-10T14:36-08:00">Thursday</time>.</p>
</footer>
</article>
...more blog posts...
</div>
<footer>
<p>Copyright © 2006 The Example Company</p>
<p><a href="about.html">About</a> -
<a href="policy.html">Privacy Policy</a> -
<a href="contact.html">Contact Us</a></p>
</footer>
</body>
div 要素が、ページのヘッダーとフッターを除いて、そのページのコンテンツすべてを囲むために使われ、さらに、ブログ・エントリーでは、そのヘッダーとフッターを除いて、そのすべてのコンテンツを囲むために使われている点に注目してください。
次の例では、2つの nav 要素がありますが、ひとつは、このサイトに関する主要なナビゲーションに使われており、もうひとつは、このページに関する補助的なナビゲーションに使われています。
<body>
<h1>The Wiki Center Of Exampland</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/events">Current Events</a></li>
...more...
</ul>
</nav>
<article>
<header>
<h1>Demos in Exampland</h1>
<p>Written by A. N. Other.</p>
</header>
<nav>
<ul>
<li><a href="#public">Public demonstrations</a></li>
<li><a href="#destroy">Demolitions</a></li>
...more...
</ul>
</nav>
<div>
<section id="public">
<h1>Public demonstrations</h1>
<p>...more...</p>
</section>
<section id="destroy">
<h1>Demolitions</h1>
<p>...more...</p>
</section>
...more...
</div>
<footer>
<p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
</footer>
</article>
<footer>
<p><small>© copyright 1998 Exampland Emperor</small></p>
</footer>
</body>
nav 要素はリストを含む必要はありません。他の種類のコンテンツも入れることができます。このナビゲーション・ブロックでは、文章の中でリンクを提供しています：
<nav> <h1>Navigation</h1> <p>You are on my home page. To the north lies <a href="/blog">my blog</a>, from whence the sounds of battle can be heard. To the east you can see a large mountain, upon which many <a href="/school">school papers</a> are littered. Far up thus mountain you can spy a little figure who appears to be me, desperately scribbling a <a href="/school/thesis">thesis</a>.</p> <p>To the west are several exits. One fun-looking exit is labeled <a href="http://games.example.com/">"games"</a>. Another more boring-looking exit is labeled <a href="http://isp.example.net/">ISP™</a>.</p> <p>To the south lies a dark and dank <a href="/about">contacts page</a>. Cobwebs cover its disused entrance, and at one point you see a rat run quickly out of the page.</p> </nav>
※ 原文：http://www.w3.org/TR/2011/WD-html5-20110525/sections.html#the-nav-element