セクションを表す要素には article 要素、section 要素、aside 要素、nav 要素の 4 つの要素がありますが、この中で最も用途が分かりやすいのは nav 要素ではないでしょうか。しかし nav 要素は生い立ちを知ればもう少し奥が深い要素です。今回は nav 要素の詳細に迫ってみたいと思います。
nav 要素の定義
nav 要素は、ご存知の通り、ナビゲーションリンクのセクションのことですね。そのリンク先は他のサイト、他のページ、そして同じページの特定の箇所だったりします。
一番多く nav 要素が使われるのは、グローバルナビゲーションのセクションでしょう。
<body>
<header>
<h1>サイト名</h1>
<nav>
<ul>
<li><a href="products.html">製品</a></li>
<li><a href="solution.html">ソリューション</a></li>
<li><a href="cases.html">導入事例</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>…</main>
<footer>…</footer>
</body>
通常、グローバルナビゲーションのリンクは、構造上はリストであることが多いため、ul 要素でマークアップするのが一般的です。また、nav 要素はセクションを表しますが、見出しを入れることは稀でしょう。
ナビゲーションならすべて nav 要素？
グローバルナビゲーションのようなリンクが集められたブロックは、ページ内にいくつも存在することがあります。例えば、左側に縦に並べられたリンクや、右側に縦に並べられたリンク、さらにはページフッターにもリンクが存在します。そして、パンくずリストも階層が深ければリンクの集まりになります。これらリンクの集まりすべてに nav 要素を使うべきでしょうか？
答えは否です。実は nav 要素はメジャーなナビゲーションに使うことを想定されたものだからです。もちろん、メジャーじゃないナビゲーションに nav 要素を使ってはいけないわけではありません。しかし、ある意味「くどい」という感じでしょうか。
この理由を理解するには、なぜ nav 要素が HTML5 に新たに導入されたのか、という理由を探ると分かります。スクリーンリーダーを想像しましょう。スクリーンリーダーが、とあるページを上から順番に読み上げているとします。
スクリーンリーダーが発する声を聴いていて、恐らく最初に出くわす最大の苦痛は、ページ上部にあるグローバルナビゲーションでしょう。早くメインコンテンツを聴きたいにもかかわらず、延々と膨大なリンク集が読み上げられるわけです。もしスクリーンリーダーに nav 要素をスキップする機能があれば、ストレスが無くなりますね。
nav 要素のもう一つのメリットは、スクリーンリーダーで、もしナビゲーションを知りたいときに簡単に呼び出せる点です。これは nav 要素でマークアップされているから実現できるわけです。いちいちナビゲーションが読まれるのを待たなくても、好きな時に nav 要素のリンク集を読み上げてもらうことができるかもしれません。
では、以上のシチュエーションを想像したうえで、どのナビゲーションブロックに nav 要素を使ったら良いか、ある程度は想像できそうですね。
少なくともグローバルナビゲーションは nav 要素にするべきです。
パンくずリストはどうでしょうか。これはサイトの構造にもよりますが、もしあなたのウェブサイトがパンくずリストを頼りにコンテンツを読み続けると便利な構造になっているなら、nav 要素でマークアップしたほうが良いでしょう。
同様に、ページ左側や右側に並べられたリンク集も、それがそのサイトを渡り歩くうえでどれほど便利なのか次第ということです。少なくともブログロールや参考リンクといった程度であれば、わざわざ nav 要素を使う必要はないということです。
ではページフッターのリンクはどうでしょうか。会社概要やプライバシーポリシーといったリンクがほとんどでしょう。企業によっては「社長あいさつ」なんてリンクもあるかもしれません。会社員の立場なら、社長のあいさつが重要でないわけがない、と思うかもしれません（笑
しかし、恐らく読者にとって重要でないリンクだからページフッターに配置されているのではないでしょうか。であれば、nav 要素を使う必要はないと考えて良いのではないでしょうか。
ページフッターなら footer 要素でマークアップされていることが多いはずです。もしかしたら、スクリーンリーダーで footer 要素をスキップする機能が用意されるかもしれませんね。（実際にそのような機能が存在するのかは残念ながら筆者は知りません。）
このように HTML5 で新たに導入された HTML 要素は、スクリーンリーダーなどの支援ツールでの利用を想定した設計がなされていることが多いので、そういう視点で考えると HTML 要素の理解が深まるのではないでしょうか。
ナビゲーションはリストでなければいけない？
nav 要素の中には ul 要素でリンクを束ねるのが一般的ですが、必ずしも ul 要素である必要はありません。極論を言えば、次のように、文章の中にリンクを埋め込んだ形でも問題ありません。
<nav>
<p>
<a href="profile.html">ninja</a> と申します。
このサイトでは、私の<a href="products.html">手作りのアクセサリー</a>を販売しています。
また、<a href="books.html">アクセサリーの作り方をまとめた書籍</a>も執筆しました。
</p>
</nav>
ウェブサイトのページが少ないのであれば、上記のような文章によるリンクブロックをグローバルナビゲーションとみなすのもアリです。
もし何かしらの教材コンテンツであれば、指定の順番でページを読んでもらいたい場合もあるでしょう。その場合は ol 要素でマークアップすると良いのではないでしょうか。
<nav>
<ol>
<li><a href="chapter1.html">特別講義 1</a></li>
<li><a href="chapter2.html">特別講義 2</a></li>
<li><a href="chapter3.html">特別講義 3</a></li>
</ol>
</nav>
まとめ
nav 要素が導入された動機の一つに、スクリーンリーダーでスキップするため、というのがあるのは興味深いですね。
実は、HTML5 黎明期には、ページから header, footer, aside, nav 要素を除いた部分がメインコンテンツになる、という考え方がありました。つまり究極に言えば、これらは無くても構わないコンテンツということです。メインコンテンツを浮かび上がらせることが、これらの要素が導入された動機の一つというのは意外ではないでしょうか。
今では新たに main 要素が導入されましたので、そういった意味合いは薄れてきたかもしれません。main 要素についてはこちらの記事「【HTML】main 要素 – 最新の仕様に準拠してますか？」をご覧ください。
今回は以上で終わりです。最後まで読んでくださりありがとうございました。それでは次回の記事までごきげんよう。
