『nav要素』 / HTML5新要素一覧　

nav要素

ナビゲーションリンクを伴うセクションを表します。

nav要素の特徴

nav要素は、サイトやページの主要なナビゲーションに使用しなければなりません。すべてのリンクグループにnav要素を使ってはいけません。

例えば、nav要素はサイトにとって主要なナビゲーションであるグローバルナビゲーション等に使います。ページフッター内に設置されているナビゲーション等にはnav要素を使わずにfooter要素で対応します。

nav要素のマークアップ基本

5つのメニュー『ホーム, ニュース, 商品一覧, 会社案内, お問い合わせ』のグローバルナビを例に、nav要素の使用方法を確認したいと思います。

<nav>
    <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">ニュース</a></li>
        <li><a href="#">商品一覧</a></li>
        <li><a href="#">会社案内</a></li>
        <li><a href="#">お問い合わせ</a></li>
    </ul>
</nav>

従来どおりul要素で各ページへのリンクナビゲーションをマークアップし、それをnav要素で囲むことで上記のリンクの集まりが主要なナビゲーションであることを表すことができます。

尚、nav要素はセクショニング・コンテンツに属していますので新たなセクションを作りますが、デフォルトでNavigation等(UAによって異なる)の見出しを持っているので無理に見出しをつける必要は無いようです。

nav要素のマークアップ応用　(複数のナビゲーション)

ブログサイトのようにサイドエリアに複数のナビゲーション・リンクがある場合は、それぞれのナビゲーション・リンクをnav要素でマークアップしてグループ分けするより、全体を1つのnav要素でマークアップするほうがスマートみたいですね（※理由は主要なナビゲーションがページ内にいくつもあるとどれが主要かが分かりずらくなってしまう為。ただし、構築する場合にどれも主要だと設計者が判断すれば１つずつnavで囲むこともよいのでは？と個人的には考えています。）。また、下記の例では中のグループをsection要素でマークアップし階層化しています。

【複数のナビゲーション・リンクをnav要素で囲んだ場合の例 】

<nav>
	<section>
	<h2>カテゴリー一覧</h2>
    <ul>
        <li><a href="#">はじめてのHTML5</a></li>
        <li><a href="#">HTML5新要素一覧</a></li>
        <li><a href="#">HTML5マークアップ時の基本</a></li>
        <li><a href="#">jQeuryの基本</a></li>
        <li><a href="#">WordPressで使用中のプラグイン</a></li>
    </ul>
    </section>
    <section>
	<h2>タグ一覧</h2>
    <ul>
        <li><a href="#">HTML5</a></li>
        <li><a href="#">HTML5新要素</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">Javascript</a></li>
        <li><a href="#">WordPress</a></li>
        <li><a href="#">WordPressプラグイン</a></li>
        <li><a href="#">PhotoShop</a></li>
    </ul>
    </section>
</nav>

以上でnav要素の勉強を終わりたいと思いますが、一応これでセクショニング・コンテンツの4要素は確認したことになります。

まだまだ不明な点も多いので、新たに分かった情報や修正箇所があった場合は随時メモしていこうと思います。

参考サイト：

• HTML5についてのおさらい　【 W3G】
• nav 要素　【HTML5.JP】

今回の記事で参考にした本

徹底解説HTML5マークアップガイドブック

HTML5の新要素や基本的なマークアップ方法について丁寧に解説が書かれています。
HTML5でサイトを構築する際やこのBlogの記事を書く時の参考にしています。他にもビジュアル系API編もcanvas要素の勉強用に持っています。

徹底解説HTML5マークアップガイドブック
最終草案対応版―全要素・全属性完全収録

「最終草案対応版―全要素・全属性完全収録」としてverが変わりました。すでに同じ本を持っている場合は追加で買わなくても大丈夫だとおもいましたがなにがなくなって追加されたか興味がありましたので両方買って見ました。

ブログを作成する際に参考にした本はこちらにまとめてあります。