HTML <nav>

HTMLのnav要素は、他のページやページ内の一部にリンクする「ナビゲーション・リンク」を持つセクションを表します。<nav>タグの使い方をサンプルを交えてご紹介します。

構文

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。nav 要素の終了タグは省略できない。

<nav>
  <!-- flow content -->
</nav>

<NAV>
  <!-- flow content -->
</NAV>

内容

nav 要素の開始タグと終了タグの間にフロー・コンテンツを含めることができる。

属性

次に示す属性をnav要素に指定できる。

class

CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。

<nav class="breadcrumb container">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/html/">HTML</a></li>
    <li><a href="#">nav</a></li>
  </ol>
</nav>

id

HTML文書内で一意な識別子を指定する。

<nav id="breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/html/">HTML</a></li>
    <li><a href="#">nav</a></li>
  </ol>
</nav>

lang

言語を指定する。

<nav lang="en">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/html/">HTML</a></li>
    <li><a href="#">nav</a></li>
  </ol>
</nav>

style

CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

<nav style="font-size: small; color: gray">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/html/">HTML</a></li>
    <li><a href="#">nav</a></li>
  </ol>
</nav>

JavaScript

JavaScriptからは HTMLElement インタフェースを通じて nav 要素へアクセスできる。

HTMLElementインタフェースのプロパティ
プロパティ	型	説明
accessKey	string	accessKey属性
accessKeyLabel	string	要素に割り当てられたアクセスキー（読取り専用）
contentEditable	string	contenteditable属性
isContentEditable	boolean	この要素が編集できるかどうか（読取り専用）
dataset	DOMStringMap	カスタムデータ属性
dir	string	dir属性
draggable	boolean	draggable属性
innerText	string	ノードに描画されるテキスト
lang	string	lang属性
style	string	style属性
tabIndex	number	tabIndex属性
title	string	title属性

参考文献

Web Hypertext Application Technology Working Group (2022) Sections HTML Living Standard