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

最終更新日:2017年10月13日  (初回投稿日: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
  1. <nav>は同じページ内に複数あってもOK
    1. CSS無しのときに グローバルナビゲーション だと知らせる工夫
  2. リンクなら何でも <nav> で囲むってわけじゃない
  3. <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 から ちょっと役割が変わっています。

関連記事
この記事をはてなブックマークに追加

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

見出しの順番

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

Re: 見出しの順番

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

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

「暗示的セクション」については、「[17-3] セクションと見出しのルール」
http://honttoni.blog74.fc2.com/blog-entry-63.html
に書いといたので、見てみてください。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.