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