ほんっとにはじめてのHTML5とCSS3：[17-4] ナビゲーションのセクションを表す nav要素

[17-4] ナビゲーションのセクションを表す nav要素

最終更新日：2017年11月01日　（初回投稿日：2011年07月19日）

<nav>要素も HTML5からの新要素です。
<article> <aside> <section> と同じく「セクショニング・コンテント」というカテゴリーに属しています。
（ <article> <aside> <section> については [17-2] で解説しています。）

「セクショニング・コンテント」に属する要素は「アウトライン」を持ちます。
ここで言うアウトラインとは、概要・あらすじって意味ではなく、文字通り「外郭」みたいなかんじ。ひとまとまりの関連性のコンテナ的なものになるという意味です。

<nav>要素で囲むと「ナビゲーションとしての意味を持つセクション」になります。
「nav」は「navigation（ナビゲーション）」の略です。

「nav」は「ナヴ」って読むべきなんでしょうが、「ナビ」って読んじゃってます。
ちなみに NAV（ナヴ）だと証券用語で、投資信託の純資産（Net Aseet Valueの略）

ここでの「ナビゲーション」とは、同じページの他の部分や、他のページに移動するためのリンクテキストのセットのこと。
ナビゲーションにはリンクテキストが複数あるので、それら1つひとつを <li>要素でリストとしてまとめるのが一般的です。

使用する要素	`<nav> 〜 </nav>`

本日のINDEX

<nav>は同じページ内に複数あってもOK
1. CSS無しのときにグローバルナビゲーションだと知らせる工夫
リンクなら何でも <nav> で囲むってわけじゃない
<nav> の中はリストじゃなくてもいい

● 2017年10月： [17-1] 〜 [17-6] は本文を大幅に書き換えました。
初回投稿時の 2011年は HTML5はまだ策定中で、ルールが現仕様と若干異なっていました。それを今回 HTML5.1 の勧告内容に沿って修正しています。
それに伴い [17-1] 〜 [17-6] は、タイトルや内容を変更しているものもあります。ご了承ください。

<nav>は同じページ内に複数あってもOK

ナビゲーションには、サイト全体に対する「グローバル・ナビゲーション」や、そのページ内だけの「ページ内ナビゲーション」などがあります。
<nav>要素はどっちにも使えるので、同じページ内に複数あってもOKです。

このサンプルも、「グローバル」と「ページ内」のナビがあります。
（クリックで別ウィンドウでサンプルが開きます）

サンプルのソースの抜粋です。

<body>
 <header>
  <h1><a href="#">Site Title</a></h1>
  <nav>
   <h2>グローバルナビゲーション</h2>
   <ul>
    <li><a href="#">CONCEPT</a></li>
    <li><a href="#">SERVICE</a></li>
    <li><a href="#">HISTORY</a></li>
    <li><a href="#">ABOUT US</a></li>
   </ul>
  </nav>
 </header>

 <main>

 <div id="eyeCatcher">  <!--アイキャッチ部分です。画像などを入れたり-->
  <h2>Sectioning Content Elements</h2>
  <p>
   <a href="#sec1-1">&lt;article&gt;</a>
   <a href="#sec1-2">&lt;aside&gt;</a>
   <a href="#sec1-3">&lt;section&gt;</a>
   <a href="#sec1-4">&lt;nav&gt;</a>
  </p>
 </div><!--END #eyeCatcher-->

<div id="container">  <!--フロートで並べるための親要素です-->
  <article>  <!--メインコンテンツを囲みます-->
   ...略...
  </article>
  <aside>  <!--サブ的なコンテンツを囲みます-->
   <nav>
   <h3>ページ内リンク</h3>
   <ul>
    <li><a href="#sec1">セクショニング・コンテント要素</a> 
    <ul>
     <li><a href="#sec1-1">article</a></li>
     <li><a href="#sec1-2">aside</a></li>
     <li><a href="#sec1-3">section</a></li>
     <li><a href="#sec1-4">nav</a></li>
     </ul>
    </li>
    <li><a href="#sec2">セクションと見出し</a>
    <ul>
     <li><a href="#sec2-1">見出しのレベルで暗示的にセクションができる</a></li>
     <li><a href="#sec2-2">セクション要素と見出しで明示的に</a></li>
    </ul>
    </li>
   </ul>
   </nav>
  </aside>
 </div><!--END #container-->

</main>

最初の <nav>要素（4〜12行）は「グローバル・ナビゲーション」。サイト内の他の主要なページへのナビゲーションです。（サンプルなのでジャンプしませんけどね）
2番目（32〜50行）は「ページ内ナビゲーション」です。

このほかに、「eyeCatcher」という id名の <div>（17〜25行）の中にも、ページ内へのリンクはありますが、これはサブタイトルにユーザビリティのためにリンクを貼っただけなので、<nav>要素は使いませんでした。

CSS無しのときにグローバルナビゲーションだと知らせる工夫

上のサンプルのHTMLファイルを CSS無しで見るとこうなります。
（クリックで別ウィンドウで開きます）

最初の <nav>要素の部分に「グローバルナビゲーション」と大きく表示されているのがわかるでしょうか。
これは <h2>要素。普段は CSSでこの <h2> を display: none で非表示にしています。

音声読み上げソフト（スクリーンリーダー）のときは、「グローバルナビゲーション」と読み上げてからナビゲーションが続きます。
アクセシビリティのための、わりと一般的な工夫です。

リンクなら何でも <nav> で囲むってわけじゃない

特にナビゲーション的な意味を持ってないと思われるリンクのセットなら <nav>要素を使う必要はありません。

サイトのフッターに、ちょっとしたリンク（会社案内・プライバシーポリシー・お問い合わせへとか）を入れたりしますが、この場合は <footer>要素だけで十分です。
＊このときも <nav>要素を使うことはできるけど、あんまり意味無いと仕様書にありました。

下記は W3C HTML5.1 仕様書にあったサンプルソースの抜粋。フッター部分です。
フッターの中にリンクのセットがありますが、<p>要素で囲んであるだけですね。

 <footer>
   <p>Copyright ©
    <span property="schema:copyrightYear">2010</span>
    <span property="schema:copyrightHolder">The Example Company</span>
   </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>

<footer>にけっこうな量のリンクが入るなら、<nav>要素でマークアップしたほうが効果的です。
[17-5] ヘッダーの header、フッターの footer、連絡先の address要素の <footer>のサンプルをご覧ください。

<nav> の中はリストじゃなくてもいい

<nav>要素は、中が必ずリストじゃなきゃってわけでは無いそうです。

下記も W3C HTML5.1 仕様書にあったサンプルです。
文章の中にリンクが複数あるんですが、その文章全体をナビゲーションにしています。
こんな使い方もOKなんですね。

<nav>
  <h2>Navigation</h2>
  <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="https://games.example.com/">"games"</a>. Another more
  boring-looking exit is labeled <a
  href="https://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>

次回予告

次回は、HTML5 からの新要素 <header> <footer> についてまとめます。
そして <address>要素についても、これはHTML5 からちょっと役割が変わっています。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2017-11-01（Wed）│
投稿日：2011-07-19（Tue）│
カテゴリ：はじめてのHTML

Pagetop ↑

« next ホーム prev »

コメントの投稿

見出しの順番

見出しはh1より前にh2を使ってもいいのですか？
順番に使わなくてはいけないと思っていたのですが、どうなんでしょうか？

2012-03-28 09:19 :
天

Re: 見出しの順番

天さん、コメントありがとうございます。

見出しの順番は、HTML5 から、数字の順じゃなくても良いらしい。
HTML5 から「暗示的セクション」という概念があるからだそうで。
私も、最初に調べたとき、へーって思いました。
でも、自分的にややこしくなりそうなので、今までどおり数字順に使ってますけど（笑）。

「暗示的セクション」については、「[17-3] セクションと見出しのルール」
http://honttoni.blog74.fc2.com/blog-entry-63.html
に書いといたので、見てみてください。

2012-03-29 20:59 :
yuki★hata