★HTML Living Standard リファレンス

<nav> …… ナビゲーションリンクのセクションを表す
Internet Explorer

<nav>タグは、ナビゲーションリンクのセクションを表す際に使用します。

ナビゲーションリンクとは、サイト内の主要なコンテンツへのリンクをまとめたリンクグループのことです。「メインメニュー」などと呼ばれるような、ウェブサイト内の各ページへのリンクやページ内リンクをひとつのセクションにまとめたものです。

nav要素の使い方

nav要素は、主要なナビゲーションとなるセクションに用いるべきもので、ページ上のリンクグループのすべてがnav要素である必要はありません。例えば、ウェブページのフッター部分に利用規約ページ、著作権ページ、トップページへ戻るなどへのリンクのリストを配置することがあります。このような場合にもnav要素を使用することはできますが、通常はnav要素である必要はなくfooter要素だけで十分です。

また、nav要素の子要素にはul要素やol要素などのリストが配置されることが多いですが、 nav要素の内容は必ずしもリストである必要はありません。例えば、サイト案内文のような文章で各コンテンツへのリンク先を案内している場合には、そのサイト案内文のテキスト全体をnav要素の内容とすることができます。

nav要素の初期レンダリング

一般的なブラウザではnav要素の初期レンダリングに特別なスタイルが設定されていませんが、ユーザーエージェントによっては、どんなユーザーを対象にするか次第でnav要素の初期レンダリングが変わる可能性があります。

例えば、音声などを使うスクリーンリーダーのように、ナビゲーション情報を省略したほうがユーザーにメリットがある場合には、初期レンダリングにおいてnav要素が省略されるかもしれません。

反対に、ナビゲーション情報をすぐに利用できるようにしたほうがユーザーにメリットがある場合には、初期レンダリングにおいてnav要素が先頭に配置されるかもしれません。

■使用例

以下のサンプルには、2つのnav要素があります。 1つはサイト内の主要なナビゲーション用で、もう1つはページ内リンクのナビゲーション用です。

フッター部分のリンクグループは、footer要素としてマークアップしただけです。このような場合にもnav要素を使用することはできますが、通常はnav要素である必要はなくfooter要素だけで十分です。

HTMLソース

<body>
 <h1>みんなのひろば</h1>

 <nav>
  <ul>
   <li><a href="/">ホーム</a></li>
   <li><a href="/events">現在のイベント</a></li>
  </ul>
 </nav>

 <article>

  <header>
   <h2>議論の場</h2>
   <p>Aさん、その他のメンバーが参加しています。</p>
  </header>

  <nav>
   <ul>
    <li><a href="#public">議論中のもの</a></li>
    <li><a href="#destroy">破棄となったもの</a></li>
   </ul>
  </nav>

  <div>
   <section id="public">
    <h2>議論中のもの</h2>
    <p>...</p>
   </section>
   <section id="destroy">
    <h2>破棄となったもの</h2>
    <p>...</p>
   </section>
  </div>

  <footer>
   <p><a href="?edit">編集</a> | <a href="?delete">削除</a> | <a href="?Rename">名前変更</a></p>
  </footer>

 </article>

 <footer>
  <p><small>© copyright 1998 みんなのひろば</small></p>
 </footer>

</body>

↓↓↓

ブラウザ上の表示

みんなのひろば

議論の場

Aさん、その他のメンバーが参加しています。

議論中のもの

...

破棄となったもの

...

■使用例

以下のサンプルでは、リンクグループが複数ありますが、それらの1つだけがnav要素として指定されています。

HTMLソース

<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>Navigation</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>
    <h2 itemprop="headline">早起きは三文の徳</h2>
   </header>
   <div itemprop="articleBody">
    <p>早起きはいいものです。三文（90円）くらいのちょっとしたいいことがあります。</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">作者</span>
  </p>
  <p><a href="about.html">このサービスについて</a> -
     <a href="policy.html">個人情報y</a> -
     <a href="contact.html">お問い合わせ</a></p>
 </footer>

</body>

↓↓↓

ブラウザ上の表示

目を覚まそう！

ニュース - ブログ - フォーラム

最終更新日: 2009-04-01

早起きは三文の徳

早起きはいいものです。三文（90円）くらいのちょっとしたいいことがあります。

...

■使用例

以下のサンプルでは、サイト案内文のテキスト全体がnav要素の内容となっています。 nav要素の子要素にはul要素やol要素などのリストが配置されることが多いですが、 nav要素の内容は必ずしもリストである必要はありません。この使用例では、段落テキストを使用してサイト案内しています。

HTMLソース

<nav>
 <h1>サイト案内文</h1>
 <p>
 あなたは私のホームページにいます。
 北には<a href="/blog">私のブログ</a>があり、そこから戦いの音が聞こえます。
 東には大きな山が見え、その上にはたくさんの<a href="/school">学校の書類</a>が散らばっています。
 この山のはるか上に、必死に <a href="/school/thesis">論文</a>を走り書きしている私をのぞき見ことができます。
 </p>
 <p>
 西側にはいくつかの出口があります。
 面白そうな出口の 1 つに<a href="https://games.example.com/">「ゲーム」</a>というラベルが付いています。
 もう 1 つの退屈な出口には、<a href="https://isp.example.net/">ISP™</a> というラベルが付いています。
 </p>
 <p>
 南には暗くて湿った<a href="/about">連絡先ページ</a>があります。
 使用されていない入り口はクモの巣で覆われており、たまにネズミがページからすばやく走り出すのが見えます。
 </p>
</nav>

↓↓↓

ブラウザ上の表示

サイト案内文

あなたは私のホームページにいます。北には私のブログがあり、そこから戦いの音が聞こえます。東には大きな山が見え、その上にはたくさんの学校の書類が散らばっています。この山のはるか上に、必死に論文を走り書きしている私をのぞき見ことができます。

西側にはいくつかの出口があります。面白そうな出口の 1 つに「ゲーム」というラベルが付いています。もう 1 つの退屈な出口には、ISP™ というラベルが付いています。

南には暗くて湿った連絡先ページがあります。使用されていない入り口はクモの巣で覆われており、たまにネズミがページからすばやく走り出すのが見えます。

■使用例

以下のサンプルは、電子メールアプリケーションを想定しています。ユーザーがフォルダを切り替える操作メニューを、nav要素でマークアップしています。

HTMLソース

<p><input type=button value="メールを作成" onclick="compose()"></p>
<nav>
 <h1>電子メールアプリ 操作メニュー</h1>
 <ul>
  <li> <a href="/inbox" onclick="return openFolder(this.href)">受信トレイ</a>
   <span class=count></span>
  <li> <a href="/sent" onclick="return openFolder(this.href)">送信済み</a>
  <li> <a href="/drafts" onclick="return openFolder(this.href)">下書き</a>
  <li> <a href="/trash" onclick="return openFolder(this.href)">ゴミ箱</a>
  <li> <a href="/customers" onclick="return openFolder(this.href)">連絡先</a>
 </ul>
</nav>

↓↓↓

ブラウザ上の表示

■関連項目

<body> …… 文書の本体（コンテンツ）を表す
<article> …… 自己完結する内容であることを表す
<section> …… 一般的なセクションを表す
<nav> …… ナビゲーションリンクのセクションを表す
<aside> …… メインコンテンツとは別のコンテンツであることを表す
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> …… セクションの見出しを表す
<hgroup> …… 見出しとその関連コンテンツを表す
<header> …… 導入部分やナビゲーション補助のグループを表す
<footer> …… フッターを表す
<address> …… 連絡先情報を表す

★HTML Living Standard リファレンス

nav要素の使い方

nav要素の初期レンダリング

■使用例

HTMLソース

ブラウザ上の表示

みんなのひろば

議論中のもの

破棄となったもの

■使用例

HTMLソース

ブラウザ上の表示

■使用例

HTMLソース

ブラウザ上の表示

■使用例

HTMLソース

ブラウザ上の表示

■関連項目

Sponsors