最終更新日:
公開日:
リファレンス
HTML
ナビ
nav要素
グローバルナビゲーション、サイドに表示するメニュー、フッター部のメニューなど、リンクのグループを表す場合に使用します。
サンプルコード
<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サンプルコードです。
同じようにして、サイドメニューや特定ページのみ表示するサブメニューなどでも使うことができます。
セクショニングコンテンツですが、見出しがなくても問題ありません。
<!-- フッター -->
<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>
<!-- //フッター -->