ウェブランサー

<nav> ページ上の主要なナビゲーションであることを表す

取り扱い HTML5から追加された要素
カテゴリ フロー・コンテント
セクショニング・コンテント
パルパブル・コンテント
親にできる要素 フロー・コンテンツが期待される場所
子にできる要素 フロー・コンテンツ
対応ブラウザ <nav>の対応状況を確認する

<nav>タグの説明

<nav>は、その要素がページ上の主要なナビゲーションであることを表します。よく使われる場所として、ヘッダーのグローバルナビゲーションや、サイドバーのコンテンツナビゲーションが挙げられます。

例えば、ウェブサイトのヘッダーにグローバルナビゲーションがある場合には、<nav>で囲うことが適切であると言えます。サイト内の主要なコンテンツに遷移するためのナビゲーションとして機能することを、マークアップによって明示することができるからです。

サイドバーに関しても、ウェブサイトの主要なコンテンツへの導線であったり、ユーザーをナビゲートするために重要なリンクの集まったリストであれば、<nav>で囲うことが望ましいでしょう。

また、メインコンテンツにローカルナビゲーションを設置するケースも考えられます。そのページの利用者にとって手助けとなるような導線を提供する目的で、ページ内リンクをリスト化して目次を設ける場合に、それがメインコンテンツにおける主要なナビゲーションになりえると判断できます。

逆に、単なるリンクの集まりや、補助的な役割りのリンクに使用すべきではありません。<nav>は、あくまで主要なナビゲーションのみに適用するようにしてください。その内容が主要なナビゲーションであると明示すべき場所を除いて、無闇に<nav>を使うことは避けましょう。

<nav>タグの特徴

<nav>はページ内に複数使うことができます。この要素自体を入れ子構造にすることはできません。

この要素はセクショニングコンテントなので、文章構造のアウトラインに影響を与えます。原則として見出しを含むことを想定していますが、無くても問題ないようです。

スクリーンリーダーのようなユーザーエージェントに対して、アクセシビリティを向上させる用途としても使用できます。

<nav>タグに指定できる属性

グローバル属性
基本的に全てのHTML要素に共通で指定できる属性です。
イベントハンドラ
基本的に全てのHTML要素に指定することができるコンテンツ属性です。

<nav>タグの使い方とサンプル

<nav>は、ドキュメントのアウトラインに影響を与えるセクショニングコンテントです。各要素との相対的な関係、文章に書かれている内容に対して適切な範囲に記述しましょう。

以下は、<nav>をヘッダーのグローバルナビゲーションに使用した例です。

HTML
<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>
		<section>
			<h1>コンテンツの見出し</h1>
			<p>コンテンツの内容。コンテンツの内容。</p>
			<p>コンテンツの内容。コンテンツの内容。</p>
		</section>
	</main>

	<footer>
		フッターの内容
	</footer>
</body>

<nav>に関連するHTMLタグ

セクション要素
<address> 連絡先(問い合わせ先)として扱う
<article> 自己完結した記事であることを示す
<aside> 本筋から分離しても問題のない余談や補足を表す
<body> ページ本体の表示領域
<footer> セクションのフッターを表す
<h1> 〜 <h6> 見出しを指定する
<header> セクションの先頭となるグループを表す
<hgroup> 見出しをグループ化してセクションのヘッダを表す
<nav> ページ上の主要なナビゲーションであることを表す
<section> ウェブページ内の文章構造におけるセクションを定義する