nav 要素

4.4.4 nav 要素

カテゴリー:
フロー・コンテンツ
セクショニング・コンテンツ
パルパブル・コンテンツ
この要素を使うことができるコンテキスト:
フロー・コンテンツが期待される場所
コンテンツ・モデル:
フロー・コンテンツ
コンテンツ属性:
グローバル属性
DOM インタフェース:
HTMLElement を使う

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: 2009-04-01</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 datetime="2009-10-10">Thursday</time>.</p>
   </footer>
  </article>
  ...more blog posts...
 </div>
 <footer>
  <p>Copyright © 2010 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/2012/CR-html5-20121217/sections.html#the-nav-element