<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>