＜nav要素＞ - ナビゲーション
公開日:
nav要素は、同じページ内や、別のページへのリンクをまとめたナビゲーションであることを表します。パンくずリスト、目次、記事一覧などの主要なナビゲーションをマークアップするべきで、例えばフッターにあるような、著者情報、サイト案内、問い合わせなどのリンクは特にnav要素で囲む必要はありません。
概要
- 名前
- nav
- カテゴリー
- Flow content
- Sectioning content
- Palpable content
- 配置できる場所
- Flow contentが期待される場所。ただし、main要素の子孫にしてはいけない。
- コンテンツモデル
- Flow content。
- タグの省略
- 開始タグも終了タグも省略できません。
- DOM Interface
- HTMLElement
- デフォルトのスタイル
nav { display: block; }- 仕様書
- https://html.spec.whatwg.org/multipage/semantics.html#the-nav-element
属性
グローバル属性
全てのタグで利用できるグローバル属性を指定できます。
説明
nav要素の使用例
nav要素はどのような部分で使われているのか、数サイトを例に紹介します。どこをnav要素にするべきか、マークアップに完璧な正解はないので、あなた独自の基準を作りましょう。
MDN
MDNでは、上部のパンくずリスト、グローバルメニューをnav要素で囲っています。記事一覧や目次は囲われていません。
Google Developersでは、パンくずリスト、グローバルメニューに加えて、ページ内メニュー、記事一覧と、積極的にnav要素が利用されています。
SYNCER
当サイトは、どちらかというとGoogle Developersと同じく、ナビゲーションメニューと言える部分は積極的にnav要素でマークアップしています。
サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】＜nav要素＞ - ナビゲーション</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/nav/">
<style>
body {
background-color: #fff ;
}
article {
background-color: #fffff0 ;
}
nav {
background-color: #ffeeff ;
}
</style>
</head>
<body>
<p>nav要素は主要なナビゲーションをマークアップする要素です。</p>
<article>
<header>
<h1>記事タイトル</h1>
<p>投稿日: 2017/01/01</p>
</header>
<nav>
<h2>目次</h2>
<ol>
<li><a href="#section-1">1章</a></li>
<li><a href="#section-2">2章</a></li>
<li><a href="#section-3">3章</a></li>
</ol>
</nav>
<section id="section-1">
<h2>1章</h2>
<p>1章です。</p>
</section>
<section id="section-2">
<h2>2章</h2>
<p>2章です。</p>
</section>
<section id="section-3">
<h2>3章</h2>
<p>3章です。</p>
</section>
</article>
</body>
</html>