HTML & CSS

最終更新日:
公開日:

リファレンス

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>
<!-- //フッター -->