基礎

HTML要素

ナビ

nav要素

最終更新日：2023-10-09
公開日：2016-01-19

グローバルナビゲーション、サイドに表示するメニュー、フッターのメニューなど、リンクのグループを表す場合に使用します。

HTML サンプルコード

<header>
  <p class="logo">サイトロゴ</p>
  <nav>
    <ul>
      <li><a href="/service">サービス一覧</a></li>
      <li><a href="/products">製品紹介</a></li>
      <li><a href="/member">メンバー紹介</a></li>
      <li><a href="/blog">ブログ</a></li>
    </ul>
  </nav>
</header>

カテゴリー

フローコンテンツ、セクショニングコンテンツ、パルパブルコンテンツ
コンテンツモデル

フローコンテンツ
使用ケース

フローコンテンツが期待される場所（ただし、main要素を子孫要素に持つことはできない）

属性

グローバル属性: グローバル属性のみ使用することができます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

使用例

フッター部分のナビゲーションを想定したサンプルコード

サイトのページ下部によく設置されているナビゲーションを想定したHTMLサンプルコードです。
同じようにして、サイドメニューや特定ページのみ表示するサブメニューなどでも使うことができます。

セクショニングコンテンツですが、見出しがなくても問題ありません。

HTML コード例

<!-- フッター -->
<footer>
  <nav>
    <ul>
      <li><a href="/access">アクセス</a></li>
      <li><a href="/privacy">プライバシーポリシー</a></li>
      <li><a href="/faq">よくある質問</a></li>
      <li><a href="/contact">お問い合わせ</a></li>
    </ul>
  </nav>
  <p class="copyright">Copyright©2016 サンプルコード</p>
</footer>
<!-- //フッター -->