HyperText Markup Language nav element.
nav要素は、ナビゲーションを形成するセクションを表します。基本的には、ページヘッダーや左サイドに掲載されるような、サイト内のページリンクの集まりを表します。
すべてのハイパー・リンクに nav要素を使ってはいけません。ページやサイトにとって主要なナビゲーションに nav要素を使います。主要であることが大事です。
例えば、多くのサイトには、ページ・フッターにページ・ナビゲーションを入れていますが、概ね、同じナビゲーションがページ・ヘッダーにも用意されている事が多いと言えるでしょう。たとえ、ページ・ヘッダーに用意されていなかったとしても、サイト・ナビゲーションとしては重要ではないと言えます。そのため、ページ・フッターに用意されたナビゲーションには、nav要素は適していません。
では、nav要素の具体的なマークアップ方法を見ていきましょう。
▼nav要素の利用例
<nav>
<ul>
<li><a href="">Home Page</a></li>
<li><a href="bbs.html">BBS</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="sitemap.html">Site Map</a></li>
</ul>
</nav>
このように、nav要素の中に ul要素を使ってリストとして各ナビゲーションをマークアップするのが良いでしょう。
nav要素はセクショニング・コンテンツに属する要素ですので、アウトライン・アルゴリズムにおいては新たなセクションを形成します。しかし、nav要素の特性上、見出しを無理に入れる必要はないでしょう。
nav要素に入れるナビゲーション部分のマークアップを見てみましょう。各ナビゲーション・リンクは、セマンティクス上は、リストと言えます。ナビゲーション・リンクを横に並べたかったとしても、それは、あくまでもスタイリングの問題です。
スタイリングは、マークアップの方法を決める基準ではありません。スタイリングはスタイルシートの役割です。マークアップはセマンティクスを優先するべきです。
▼横に並んだナビゲーション
このナビゲーションは当サイトのナビゲーションです。nav要素の中に ul要素を使って各ナビゲーション・リンクをマークアップしています。そして、スタイルシートを使って、各ナビゲーション・リンクを横に並べて見た目を調整しています。
▼ Sample CSS
.nav_sample li {
/* リストを横並びにします */
display: inline-block;
/* リンクどおしが近すぎたのでスペースを確保 */
padding: 5px;
}
どのナビゲーション・リンクに nav要素を使えばいいのでしょうか。仕様上、それは主要なナビゲーションに使うべきと規定されていますが、はっきりしません。
それを判断する基準として、スクリーン・リーダーや音声ブラウザを想像するとよいでしょう。将来的にこれらの支援テクノロジーが、ナビゲーションだけを呼び出すコマンドを実装する事を想像してみてください。ページの至る所に nav要素が使われていたとしたら、利用者はうんざりする事になるでしょう。このような支援テクノロジーを想定すれば、どの領域が重要なナビゲーションなのかを検討しやすくなります。
HTML5でマークアップする場合、nav要素の数の基準は、ページに２つか３つ程度がよさそうです。１つ目はサイト全体のナビゲーションです。これは主にページ・ヘッダー部に入れる事が多いでしょう。２つ目は、該当ページが属するサイト・カテゴリー内のナビゲーションです。これは、よくページの左側または右側に配置される事が多いと言えます。３つ目は、必要に応じて、パンくずリストに使います。これは、該当ページがサイト内でどこにいるのかを指し示すナビゲーションと言えます。
▼マークアップ例
<body>
<!-- サイトのヘッダー情報 -->
<header>
<nav>...</nav>
</header>
<!-- 左サイド -->
<div>
:
:
:
<nav>...</nav>
</div>
<!-- 右サイド -->
<div>
<aside>...</aside>
</div>
<!-- メイン・コンテンツ -->
<article>
<nav>...</nav>
:
:
:
</article>
<!-- サイトのフッター情報 -->
<footer>...</footer>
</body>
サイトのグローバル・ナビゲーションは、header要素の中に入れています。
そしてカテゴリー内のナビゲーションは左サイドに入れています。
そして、パンくずリストは、メインコンテンツの位置を表すナビゲーションですから、そのメイン・コンテンツを囲んでいる article要素の中に入れています。nav要素を article要素の中に入れる事で、そのナビゲーションは、グローバル・ナビゲーションではなく、その記事に直接関連したナビゲーションという事を、マークアップで表すことになります。
１つのナビゲーション領域の中で、ナビゲーション・リンクをいくつかのグループに分類する場合を考えてみましょう。
これは、多くのブログサイトで見られるナビゲーションですが、このナビゲーション・リンクは、Category と Archives というグループに分類されています。グループのスタイルを区別するためだけに、アウトラインのトップレベルで nav要素をグループごとに分けて使うのはお勧めできません。
▼グループごとに nav要素を使った場合
<nav>
<h3>Category</h3>
<ul>
<li>Uncategorized</li>
<li>HTML5</li>
:
:
:
</ul>
</nav>
<nav>
<h3>Archives</h3>
<ul>
<li>2011.08</li>
<li>2011.07</li>
:
:
:
</ul>
</nav>
主要なナビゲーション領域に nav要素を使うべきなのに、これでは、どれが主要なのか分かりません。そもそも、この場合は、これらのグループ全体がページ・ナビゲーション領域を表しているわけですから、nav要素で分離する必要なないはずです。
このようにナビゲーションをグループで分類したい場合は、全体を 1つの nav要素で囲んで、それぞれのグループ領域を section要素を使って階層化するのが良いでしょう。
▼全体を１つの nav要素でマークアップした場合
<nav>
<section>
<h3>Category</h3>
<ul>
<li>Uncategorized</li>
<li>HTML5</li>
:
:
:
</ul>
</section>
<section>
<h3>Archives</h3>
<ul>
<li>2011.08</li>
<li>2011.07</li>
:
:
:
</ul>
</section>
</nav>
しかし、事情によっては nav要素をグループごとにマークアップしたい場合もあるでしょう。その場合は、それらを aside要素で囲むことも可能です。
▼ aside要素を使ってナビゲーションをまとめた場合の例
<aside>
<nav>
<h3>Category</h3>
<ul>
<li>Uncategorized</li>
<li>HTML5</li>
:
:
:
</ul>
</nav>
<nav>
<h3>Archives</h3>
<ul>
<li>2011.08</li>
<li>2011.07</li>
:
:
:
</ul>
</nav>
</aside>
大規模なサイトになると、テキストボックスにキーワードを入れて、サイト内のページを検索する機能を提供しています。
さて、このような検索ボックスは nav要素にふさわしいでしょうか。検索ボックスは訪問者を適切なページにナビゲートするために大事な役割を果たすのだから、nav要素がふさわしいと考える人も多いでしょう。
この判断は、意見が分かれるところだとは思いますが、私は、nav要素に検索ボックスだけを入れるのは適切とは言えないと考えています。nav要素はナビゲーション・リンクを伴うセクションを表すと、HTML5仕様は言っているからです。
多くのサイトではサイトマップのページが用意されています。サイトマップは、基本的にはナビゲーションの塊と言えます。
しかし、サイトマップのページのコンテンツを nav要素でマークアップするのは間違いです。サイトマップのコンテンツは、そのページのメイン・コンテンツです。そのため、それは section要素などでマークアップするのが適切です。
▼サイトマップ・ページのマークアップ例
<body>
<!-- ページ・ヘッダー -->
<header>
<h1>激安ゴルフショップ</h1>
<nav><!-- グローバル・ナビゲーション --></nav>
</header>
<!-- ページ本文 -->
<section>
<h1>サイトマップ</h1>
<section>
<h2>ゴルフクラブ・ギア</h2>
<ul>
<li><a href="a.html">ドライバー</a></li>
<li><a href="b.html">アイアン</a></li>
<li><a href="c.html">ウェッジ</a></li>
</ul>
</section>
<section>
<h2>ゴルフウェア</h2>
<ul>
<li><a href="d.html">キャディバッグ</a></li>
<li><a href="e.html">シューズ</a></li>
<li><a href="f.html">グローブ</a></li>
</ul>
</section>
</section>
<!-- ページ・フッター -->
<footer>...</footer>
</body>
nav {
display: block;
}