学びBAR
  • Home
  • WEB関連知識のスキルアップ
    • Udemy 開催講座 >
      • HTML,CSSルール基礎知識 >
        • Udemy 1800円受講クーポン
  • ストリートアカデミー講座
    • HTMLルール基礎 4h テキストダウンロード
  • 学びBARについて
  • コラム
  • お問合せ
HOME / WEB関連知識のスキルアップ / HTMLクイック・リファレンス / HTML5(目的別) / <nav>

HTML5  <nav>

<nav>は、ナビゲーションであることを示す際に使用します。 ナビゲーションとは、ウェブサイト内の他のページへのリンクや、ページ内リンクなどのことです。
他のページにリンクした箇所のすべてを<nav>~</nav>で囲む必要はなく、主要なナビゲーションとなるセクションのみを示すのに適しています。
よく、ウェブページの下部に、利用規約ページ、著作権ページ、トップページへ戻る、などのリンクが配置されることがありますが、 このような場合には<nav>を使用せず、<footer>のみで十分です。

■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>
↓↓↓
ブラウザ上の表示
リンク先のページで表示を見ることができます
HOME                      ABOUT                      SERVICES                      UPDATES                     CONTACT
画像
1996-2024(c)Cre'ps design lab.  All rights reserved.
  • Home
  • WEB関連知識のスキルアップ
    • Udemy 開催講座 >
      • HTML,CSSルール基礎知識 >
        • Udemy 1800円受講クーポン
  • ストリートアカデミー講座
    • HTMLルール基礎 4h テキストダウンロード
  • 学びBARについて
  • コラム
  • お問合せ