nav 要素

4.3.4 nav 要素

カテゴリー:
フロー・コンテント
セクショニング・コンテント
パルパブル・コンテント
この要素を使うことができるコンテキスト:
フロー・コンテントが期待される場所
コンテントモデル:
フロー・コンテント 、ただし、子孫に main 要素がないこと。
コンテント属性:
グローバル属性
text/html におけるタグの省略:
どちらのタグも省略できません。
指定可能な ARIA role 属性 の値:
navigation ロール (デフォルト - 指定不要) または presentation
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
DOM インタフェース:
HTMLElement を使う

nav 要素は、他のページやそのページ内の部分へリンクするページのセクション、つまりナビゲーション・リンクを伴うセクションを表します。

nav 要素のコンテンツが項目リストを表す場合には、それを解釈してナビゲーションしやすくできるよう、リストのマークアップを使ってください。

ページ上のすべてのリンクのグループが nav 要素の中にある必要はありません。この要素は、主に、主要なナビゲーション・ブロックからなるセクションを対象としています。とりわけ、サービス規約、ホーム、著作権ページといったサイトのさまざまなページへの短いリンク・リストをフッターに入れることが一般的です。このような場合においては、footer 要素だけで十分です。このような場合にも nav 要素を使うことができますが、通常は意味がありません。

レンダリング初期の段階ではナビゲーション情報を省略したほうが都合の良いユーザーや、すぐにそれを使えたほうが都合の良いユーザーを対象とするユーザーエージェント(スクリーンリーダーなど)は、初期の段階でどのコンテンツをスキップ、または、リクエストに応じて提供(またはその両方)するべきかを決定する方法として、この要素を使うことができます。

次の例では、ページの中に、リンクが存在する場所がいくつかあります。しかし、それらの場所のひとつだけを、ナビゲーションのセクションとしています。

<body itemscope itemtype="http://schema.org/Blog">
 <header>
  <h1>シープルを目覚めさせろ!</h1>
  <p><a href="news.html">ニュース</a> -
     <a href="blog.html">ブログ</a> -
     <a href="forums.html">フォーラム</a></p>
  <p>最終更新日: <span itemprop="dateModified">2009-04-01</span></p>
  <nav>
   <h1>ナビゲーション</h1>
   <ul>
    <li><a href="articles.html">全記事索引</a></li>
    <li><a href="today.html">今日のシープルを目覚めさせるために必要なこと</a></li>
    <li><a href="successes.html">なんとか目覚めさせたシープル</a></li>
   </ul>
  </nav>
 </header>
 <main>
  <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
   <header>
    <h1 itemprop="headline">ビーチで最高</h1>
   </header>
   <div itemprop="articleBody">
    <p>今日、ビーチに行きました。とても楽しかったです。</p>
    ...コンテンツが続く...
   </div>
   <footer>
    <p>投稿日 <time itemprop="datePublished" datetime="2009-10-10">木曜日</time>.</p>
   </footer>
  </article>
  ...ブログの投稿が続く...
 </main>
 <footer>
  <p>Copyright ©
   <span itemprop="copyrightYear">2010</span>
   <span itemprop="copyrightHolder">The Example Company</span>
  </p>
  <p><a href="about.html">当社について</a> -
     <a href="policy.html">プライバシーポリシー</a> -
     <a href="contact.html">連絡方法</a></p>
 </footer>
</body>

main 要素がページのメインコンテンツを囲むために使われていることに注意してください。この場合は、ページヘッダーとフッター以外のすべてのコンテンツです。

この例ではマイクロデータ注記も見られます。これは、schema.org の語彙を使って、ログ投稿に関する発行日時などのメタデータを提供しています。

次の例では、2つの nav 要素がありますが、ひとつは、このサイトに関する主要なナビゲーションに使われており、もうひとつは、このページに関する補助的なナビゲーションに使われています。

<body>
 <h1>ExamplandのWikiセンター</h1>
 <nav>
  <ul>
   <li><a href="/">ホーム</a></li>
   <li><a href="/events">最新イベント</a></li>
   ...続く...
  </ul>
 </nav>
 <main>
  <header>
   <h1>Examplandでのデモ</h1>
   <p>著者:A. N. 他</p>
  </header>
  <nav>
   <ul>
    <li><a href="#public">公衆デモ</a></li>
    <li><a href="#destroy">破壊</a></li>
    ...more...
   </ul>
  </nav>
  <div>
   <section id="public">
    <h1>公衆デモ</h1>
    <p>...続く...</p>
   </section>
   <section id="destroy">
    <h1>破壊</h1>
    <p>...続く...</p>
   </section>
   ...続く...
  </div>
  <footer>
   <p><a href="?edit">編集</a> | <a href="?delete">削除</a> | <a href="?Rename">名前の変更</a></p>
  </footer>
 </main>
 <footer>
  <p><small>© copyright 1998 Exampland皇帝</small></p>
 </footer>
</body>

nav 要素はリストを含む必要はありません。他の種類のコンテンツも入れることができます。このナビゲーション・ブロックでは、文章の中でリンクを提供しています:

<nav>
 <h1>ナビゲーション</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/2014/REC-html5-20141028/sections.html#the-nav-element