備忘録的プログラミングリファレンス

nav タグエレメント

ブロックレベルエレメント

 nav タグエレメントは、サイトの目次やリンク集のようなリンク群を包括するための HTML タグエレメントです。サイトの目次には、サイト内のカテゴリー別のリンクやサイト内ページへのリンクといったものがあります。外部サイトへのリンク集もこの nav タグで包括することが想定されています。

<nav> タグ
<nav>
	<ul>
		<li><a href="javascript:void(0);">最新</a></li>
		<li><a href="javascript:void(0);">最近の日記</a></li>
		<li><a href="javascript:void(0);">過去の日記</a></li>
		<li><a href="javascript:void(0);">日記の友</a></li>
	</ul>
</nav>

 nav タグエレメントの数と場所は任意ですが、<header> 内に包括する場合と、 <header><main> の間に設ける場合などが考えられます。

 以下は、<header>、<nav>、<main><footer>を使った簡単な例です。

<nav>

 <nav> は web ページの表示における構成に利用されます。詳しくは、body タグ以下のページ内容構成エレメントを参照してください。

ナビリストとスタイルシート

 上記の例ではカテゴリーリンクはリスト <ul> が利用されています。多くの場合はナビリンクには <ul> タグが使用されます。
 このようなリスト形式の表示を横並びにするためにはスタイルシート( CSS )を使用します。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。

 ナビメニューのレイアウトについて詳しくはナビメニュー, トピックパスを参照してください。

その他

 nav タグエレメントはセクショニング・コンテンツとも呼ばれます。
 セクショニング・コンテンツには <article><section><aside> があります。何らかのまとまりを示します。
 <main><header><footer> はセクショニング・コンテンツではありません。

属性(Attributes)

 主な属性のみを示します。

AttributeValueExtra information
classcssに使います。同名のclassは同じスタイルが適応されます。

タグの編集

JavaScript

 <nav> エレメントに関しては HTMLNavElement というインターフェイスはないようです。特別にプロパティとメソッドが公開されていないためということらしいです。
 <nav> エレメントのインターフェイスの定義は、HTMLElement を参照してください。