HTML5 <nav>
<nav>は、ナビゲーションであることを示す際に使用します。 ナビゲーションとは、ウェブサイト内の他のページへのリンクや、ページ内リンクなどのことです。
他のページにリンクした箇所のすべてを<nav>~</nav>で囲む必要はなく、主要なナビゲーションとなるセクションのみを示すのに適しています。
■HTML4.01からHTML5へのバージョンアップによる変更点
nav要素は、HTML5から新たに追加された要素です。
■使用例
HTMLソース
<body>
<header>
<h1>オートパーツ販売店</h1>
<p>
<a href="news.html">お知らせ</a>
<a href="blog.html">店長ブログ</a>
</p>
<nav>
<h1>メニュー</h1>
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="item.html">商品一覧</a></li>
<li><a href="shop.html">店舗紹介</a></li>
</ul>
</nav>
</header>
<article>
<p>新商品、入荷しました…</p>
</article>
<footer>
<p>
<a href="help.html">ヘルプ</a>
<a href="policy.html">利用規約</a>
<a href="contact.html">お問合せ</a>
</p>
<p>Copyright 2025</p>
</footer>
</body>
<body>
<header>
<h1>オートパーツ販売店</h1>
<p>
<a href="news.html">お知らせ</a>
<a href="blog.html">店長ブログ</a>
</p>
<nav>
<h1>メニュー</h1>
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="item.html">商品一覧</a></li>
<li><a href="shop.html">店舗紹介</a></li>
</ul>
</nav>
</header>
<article>
<p>新商品、入荷しました…</p>
</article>
<footer>
<p>
<a href="help.html">ヘルプ</a>
<a href="policy.html">利用規約</a>
<a href="contact.html">お問合せ</a>
</p>
<p>Copyright 2025</p>
</footer>
</body>
↓↓↓