<nav> ページ上の主要なナビゲーションであることを表す
| 取り扱い | 現行の標準 |
| カテゴリ |
フロー・コンテンツ セクショニング・コンテンツ パルパブル・コンテンツ |
| 親にできる要素 | フロー・コンテンツを受け入れる要素 |
| 子にできる要素 | フロー・コンテンツ |
| 対応ブラウザ | caniuseで確認 |
<nav>タグの説明
<nav>は、その要素がページ上の主要なナビゲーションであることを表します。よく使われる場所として、ヘッダーのグローバルナビゲーションや、サイドバーのコンテンツナビゲーションが挙げられます。
例えば、ウェブサイトのヘッダーにグローバルナビゲーションがある場合には、<nav>で囲うことが適切であると言えます。サイト内の主要なコンテンツに遷移するためのナビゲーションとして機能することを、マークアップによって明示できるからです。
サイドバーに関しても、ウェブサイトの主要なコンテンツへの導線であったり、ユーザーをナビゲートするために重要なリンクの集まったリストであれば、<nav>で囲うことが望ましいでしょう。
また、メインコンテンツにローカルナビゲーションを設置するケースも考えられます。そのページの利用者にとって手助けとなるような導線を提供する目的で、ページ内リンクをリスト化して目次を設ける場合に、それがメインコンテンツにおける主要なナビゲーションになりえると判断できます。
逆に、単なるリンクの集まりや、補助的な役割りのリンクに使用すべきではありません。<nav>は、あくまで主要なナビゲーションのみに適用するようにして下さい。その内容が主要なナビゲーションであると明示すべき場所を除いて、無闇に<nav>を使うことは避けましょう。
<nav>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- この要素はセクショニング・コンテンツなので、文章構造のアウトラインに影響を与えます。
- 原則として見出しを含むことを想定していますが、無くても問題ないようです。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
- スクリーンリーダーのようなユーザーエージェントに対して、読み上げの対象を判断する材料を提供できます。アクセシビリティを向上させる用途としても有効です。
<nav>に指定できる主な属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<nav>の使い方とサンプル
<nav>は、ドキュメントのアウトラインに影響を与えるセクショニング・コンテンツです。各要素との相対的な関係、文章に書かれている内容に対して適切な範囲に記述しましょう。
以下の内容は、<nav>をヘッダーのグローバルナビゲーションに使用した例です。
HTML
<body>
<header>
<h1>サイト名</h1>
<h2>このサイトのキャッチコピー</h2>
<nav>
<ul>
<li><a href="home">ホーム</a></li>
<li><a href="blog">ブログ</a></li>
<li><a href="contents">コンテンツ</a></li>
<li><a href="sitemap">サイトマップ</a></li>
<li><a href="contact">コンタクト</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h1>コンテンツの見出し</h1>
<p>コンテンツの内容。コンテンツの内容。</p>
<p>コンテンツの内容。コンテンツの内容。</p>
</section>
</main>
<footer>
フッターの内容
</footer>
</body>
<nav>に関連するHTMLタグ
| 文書の構造を組み立てる要素 | |
|---|---|
| <article> | 自己完結した記事であることを示す |
| <section> | 文書構造におけるセクションを定義する |
| <aside> | 本筋から分離しても問題のない余談や補足を表す |
| <nav> | ページ上の主要なナビゲーションであることを表す |
| <header> | セクションの先頭となるグループを表す |
| <footer> | セクションのフッターを表す |
| <h1> 〜 <h6> | 文書やセクションの見出しを表す |
| <p> | 文章の段落を指定する |