<nav>タグの解説
<nav>は、その要素がページ上の主要なナビゲーションであることを表します。よく使われる場所として、ヘッダーのグローバルナビゲーションや、サイドバーのコンテンツナビゲーションが挙げられます。
例えば、ウェブサイトのヘッダーにグローバルナビゲーションがある場合には、<nav>で囲うことが適切であると言えます。サイト内の主要なコンテンツに遷移するためのナビゲーションとして機能することを、マークアップによって明示できるからです。
サイドバーに関しても、ウェブサイトの主要なコンテンツへの導線であったり、ユーザーをナビゲートするために重要なリンクの集まったリストであれば、<nav>で囲うことが望ましいでしょう。
また、メインコンテンツにローカルナビゲーションを設置するケースも考えられます。そのページの利用者にとって手助けとなるような導線を提供する目的で、ページ内リンクをリスト化して目次を設ける場合に、それがメインコンテンツにおける主要なナビゲーションになりえると判断できます。
逆に、単なるリンクの集まりや、補助的な役割りのリンクに使用すべきではありません。<nav>は、あくまで主要なナビゲーションのみに適用するようにして下さい。その内容が主要なナビゲーションであると明示すべき場所を除いて、無闇に<nav>を使うことは避けましょう。
<nav>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- この要素はセクショニング・コンテンツなので、文章構造のアウトラインに影響を与えます。
- 原則として見出しを含むことを想定していますが、無くても問題ないようです。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
- スクリーンリーダーのようなユーザーエージェントに対して、読み上げの対象を判断する材料を提供できます。アクセシビリティを向上させる用途としても有効です。
<nav>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<nav>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。<nav>の中には閲覧者の手助けになるような主要なナビゲーションを配置します。多くの場合、それはリスト形式のリンクであったりボタン要素であったりします。
<nav>
// ページ内の主要なナビゲーション
</nav>
<nav>は、ドキュメントのアウトラインに影響を与えるセクショニング・コンテンツです。各要素との相対的な関係、文章に書かれている内容に対して適切な範囲に記述しましょう。
以下の内容は、<nav>をヘッダーのグローバルナビゲーションに使用した例です。
<body>
<header>
<h1>サイト名</h1>
<h2>このサイトのキャッチコピー</h2>
<nav>
<ul>
<li><a href="home">ホーム</a></li>
<li><a href="blog">ブログ</a></li>
<li><a href="contents">コンテンツ</a></li>
<li><a href="sitemap">サイトマップ</a></li>
<li><a href="contact">コンタクト</a></li>
</ul>
</nav>
</header>
<main>
<h1>コンテンツの見出し</h1>
<p>コンテンツの内容。コンテンツの内容。</p>
<p>コンテンツの内容。コンテンツの内容。</p>
</main>
<footer>
フッターの内容
</footer>
</body>
サイドバーやフッターにもナビゲーションを置きたい場合に、それがページの中で主要なナビゲーションであると判断できるものであれば、、ひとつのページに複数設置するこが許可されています。もちろん、<main>要素や<article>要素の中であっても置くことができます。
<body>
<header class="site-header">
<h1>サイト名</h1>
<h2>このサイトのキャッチコピー</h2>
<nav class="header-nav">
<ul>
<li><a href="home">ホーム</a></li>
<li><a href="blog">ブログ</a></li>
<li><a href="contents">コンテンツ</a></li>
<li><a href="sitemap">サイトマップ</a></li>
<li><a href="contact">コンタクト</a></li>
</ul>
</nav><!--/=== header-nav ===-->
</header><!--/=== site-header ===-->
<div class="layout-block">
<main class="main-contents">
<h1>コンテンツの見出し</h1>
<p>コンテンツの内容。コンテンツの内容。</p>
<p>コンテンツの内容。コンテンツの内容。</p>
<p>コンテンツの内容。コンテンツの内容。</p>
</main><!--/=== main-contents ===-->
<aside class="sidebar">
<h2>サイドバーの見出し</h2>
<section class="ad">広告枠</section>
<nav class="side-menu">
<ul class="category">
<li><a href="cat-id">カテゴリー</a></li>
<li><a href="cat-id">カテゴリー</a></li>
<li><a href="cat-id">カテゴリー</a></li>
<li><a href="cat-id">カテゴリー</a></li>
<li><a href="cat-id">カテゴリー</a></li>
</ul>
<ul class="tag">
<li><a href="tag-id">タグ</a></li>
<li><a href="tag-id">タグ</a></li>
<li><a href="tag-id">タグ</a></li>
<li><a href="tag-id">タグ</a></li>
<li><a href="tag-id">タグ</a></li>
</ul>
</nav><!--/=== side-menu ===-->
</aside><!--/=== sidebar ===-->
</div><!--/=== layout-block ===-->
<footer class="site-footer">
<nav class="footer-nav">
<ul>
<li><a href="home">Home</a></li>
<li><a href="about">About</a></li>
<li><a href="auther">Auther</a></li>
<li><a href="privacy">privacypolicy</a></li>
<li><a href="contact">contact</a></li>
</ul>
</nav><!--/=== footer-nav ===-->
<small>CopyRight</small>
</footer><!--/=== site-footer ===-->
</body>