ナビゲーションを表すには?
navタグの書式
navタグに対応しているブラウザ
※Windows 7上で動作確認を行っています。
※ブラウザの設定より、異なる挙動をする場合があります。
navタグの属性一覧
navタグの解説
<nav>タグは、ナビゲーションを表すための要素です。
ナビゲーションとは、
- ページ内の他の箇所へのリンク(ページ内リンク)
- サイト内の他のページへのリンク
の集まりであるセクションのことです。
ただし、すべてのリンクの集まりを<nav>に入れる必要はありません。
<nav>はサイト内の主要なナビゲーションを表すために使用します。
通常、ページのフッタ部分にくるような、トップページや利用規約へのリンクなどは、<nav>ではなく<footer>に入れます。
navタグのサンプルソース1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル1</title>
</head>
<body>
<header>
<h1>温泉めぐり</h1>
<p>年末は、温泉に行きましょう。</p>
<nav>
<h1>人気温泉地</h1>
<ul>
<li><a href="hakone.html">箱根温泉</a></li>
<li><a href="atami.html">熱海温泉</a></li>
<li><a href="shirahama.html">白浜温泉</a></li>
</ul>
</nav>
</header>
<section>
<h1>温泉の楽しみ方</h1>
<p>温泉の楽しみ方はいろいろあります。・・・</p>
</section>
<footer>
<p><small>無断転載を禁止します。</small></p>
</footer>
</body>
</html>
navタグのサンプル画面1
navタグのサンプルソース2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル2</title>
</head>
<body>
<header>
<h1>会社案内</h1>
<nav>
<ul>
<li><a href="#business">事業内容</a></li>
<li><a href="#address">オフィス所在地</a></li>
</ul>
</nav>
</header>
<section id="business">
<h1>事業内容</h1>
<p>弊社は・・・</p>
</section>
<section id="address">
<h1>オフィス所在地</h1>
<p>最寄駅は・・・</p>
</section>
<footer>
<p><small>無断転載を禁止します。.</small></p>
</footer>
</body>
</html>
navタグのサンプル画面2
navタグの関連項目