<nav></nav>
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | フロー・コンテンツ / セクショニング・コンテンツ / パルパブル・コンテンツ |
| 利用場所 | セクショニング・コンテンツが置ける場所 |
| 内容 | フロー・コンテンツ |
nav要素は、ナビゲーションのセクションを表します。そのサイト、またはページ内の移動で必要となる主要なリンクメニューのセクションで使用します。
<nav>
<ul>
<li><a href="link1.html">リンク1</a></li>
<li><a href="link2.html">リンク2</a></li>
<li><a href="link3.html">リンク3</a></li>
</ul>
</nav>
nav要素は、他のリンクメニューとナビゲーションとを区別するために使用します。具体的には、次のようなリンクメニューがナビゲーションに該当すると思われます。
- グローバルナビゲーション（主にヘッダやサイドバーに配置されるリンクメニュー）
- パンくずリスト（階層を表すリンクメニュー）
- ページャー（ページ送りのリンクメニュー）
- ページ内リンク（各セクションに移動するためのリンクメニュー）
逆に、次のようなリンクメニューには適しません。
- 規約や著作権ページなどへのリンク（主にページのフッタに配置されるリンクメニュー）
- 外部サイトへのリンク集（おススメサイト集、営業所一覧、などのリンクメニュー）
nav要素の内容は、必ずしもリストである必要はありません。次のように文章で表すことも可能です。
<nav>
<h2>コンテンツのご案内</2>
<p>HTMLについて知りたい方は<a href="html.html">HTMLリファレンス</a>をご覧ください。</p>
<p>CSSについて知りたい方は<a href="css.html">CSSリファレンス</a>をご覧ください。</p>
</nav>
- 旧HTMLからの変更点
-
- HTML5：nav要素が定義されました。
- HTML LS：利用場所が微妙に変わりました。（フロー・コンテンツが置ける場所 → セクショニング・コンテンツが置ける場所）
使用例
<!DOCTYPE html>
<html>
<head>
<title>文書のタイトル</title>
</head>
<body>
<header>
<h1>文書のタイトル</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="html.html">HTMLリファレンス</a></li>
<li><a href="css.html">CSSリファレンス</a></li>
</ul>
</nav>
</header>
<article>
<h2>記事のタイトル</h2>
<p>...</p>
</article>
<footer>
<ul>
<li><a href="rule.html">ご利用について</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
<p><small>(c) 2021 TAG index.</small></p>
</footer>
</body>
</html>
<article>
<header>
<h2>記事のタイトル</h2>
<nav>
<ul>
<li><a href="#section1">セクション1へ</a></li>
<li><a href="#section2">セクション2へ</a></li>
<li><a href="#section3">セクション3へ</a></li>
</ul>
</nav>
</header>
<section id="section1">
<h3>セクション1</h3>
<p>...</p>
</section>
<section id="section2">
<h3>セクション2</h3>
<p>...</p>
</section>
<section id="section3">
<h3>セクション3</h3>
<p>...</p>
</section>
</article>