【HTML Living Standard】nav要素の使い方
nav要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
navオブジェクトは、HTML文書内でナビゲーションリンクのセクションを表すオブジェクトです。この要素は、ウェブサイトの主要なナビゲーションブロックをマークアップするために使用され、訪問者がサイト内を効率的に移動するための重要なリンクのグループを含みます。例えば、グローバルナビゲーション、目次、パンくずリスト、またはページ内ジャンプリンクといった、サイト構造の中心となるリンク群がこれに該当します。
nav要素を用いることで、HTML文書の構造がセマンティックに明確化されます。これは、検索エンジンがページのコンテンツをより正確に理解するのに役立つだけでなく、特にスクリーンリーダーを使用するユーザーにとって、ウェブページのアクセシビリティを大幅に向上させます。スクリーンリーダーはnav要素を認識し、ユーザーが主要なナビゲーションエリアを簡単に特定し、スキップしたり直接アクセスしたりする機能を提供できるため、視覚的な情報に頼れない利用者もウェブサイトを効率的に探索できるようになります。
ただし、nav要素は全てのリンクを囲むために使うべきではありません。例えば、フッターに記載される著作権情報へのリンクや、本文中の一般的なハイパーリンクなどは、nav要素の適用範囲外です。通常、文書内の主要なナビゲーションブロックに限定して使用することが推奨されます。一つのHTML文書内に複数のnav要素が存在しても問題ありませんが、それぞれのnav要素が異なる種類のナビゲーションを表す場合、aria-label属性などを用いてその目的を明示することで、アクセシビリティをさらに高めることができます。この要素は、ユーザーにとって使いやすく、機械にも理解しやすいウェブページを構築するために不可欠な役割を担っています。
構文(syntax)
1<nav> 2 <!-- ナビゲーションリンクを含むフローコンテンツ --> 3</nav>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML nav要素でナビゲーションを作成する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>nav要素の基本的な使い方</title> 7</head> 8<body> 9 10 <!-- 11 nav要素は、現在のドキュメントまたは関連ドキュメントの他のセクションへの 12 ナビゲーションリンクを提供するセクションを定義します。 13 主に、メインメニュー、目次、パンくずリストなどに使用されます。 14 --> 15 <nav> 16 <h2>メインナビゲーション</h2> 17 <ul> 18 <li><a href="#home">ホーム</a></li> 19 <li><a href="#about">私たちについて</a></li> 20 <li><a href="#services">サービス</a></li> 21 <li><a href="#contact">お問い合わせ</a></li> 22 </ul> 23 </nav> 24 25 <main> 26 <h1>ウェブサイトのメインコンテンツ</h1> 27 <section id="home"> 28 <h2>ホームセクション</h2> 29 <p>ここにウェブサイトのトップページコンテンツが記述されます。</p> 30 </section> 31 <section id="about"> 32 <h2>私たちについて</h2> 33 <p>企業情報やチームメンバーの紹介など。</p> 34 </section> 35 <section id="services"> 36 <h2>サービス</h2> 37 <p>提供しているサービスの一覧や詳細。</p> 38 </section> 39 <section id="contact"> 40 <h2>お問い合わせ</h2> 41 <p>連絡先情報やフォームなど。</p> 42 </section> 43 </main> 44 45</body> 46</html>
HTMLのnav要素は、ウェブサイトにおける主要なナビゲーションリンクのセクションを定義するために使用されます。これは、ユーザーがサイト内を移動するためのメインメニュー、目次、パンくずリストなど、重要なリンクグループを構造的にまとめる役割を持っています。
提供されたサンプルコードでは、ウェブサイトのグローバルナビゲーションとしてnav要素が活用されています。「ホーム」「私たちについて」「サービス」「お問い合わせ」といった主要なページへのリンクが<ul>要素と<a>要素を使ってグループ化され、これ全体がnav要素で囲まれています。これにより、この領域が単なるコンテンツのまとまりではなく、明確にナビゲーション機能を持つブロックであることを、ブラウザや検索エンジン、スクリーンリーダーなどの外部ツールに対して意味的に伝えています。
nav要素には、直接設定する引数や、特定の値を生成する戻り値は存在しません。これは、nav要素がコンテンツにセマンティック（意味的）な構造を与えるための「入れ物」であり、プログラムのような機能的な処理を伴わないためです。nav要素を適切に使用することで、ウェブページの構造がより明確になり、ウェブサイトのアクセシビリティ向上や検索エンジン最適化（SEO）にも繋がります。これは、単に汎用的なdiv要素でグループ化するよりも、その領域が「ナビゲーション」であることを明示的に示すという重要な意味を持ちます。
HTMLのnav要素は、ウェブサイトの主要なナビゲーションリンクをまとめるために使用します。メインメニューや目次、パンくずリストなど、そのページやサイト内を移動するための重要なリンク群に限定して使いましょう。すべてのリンクのグループにnav要素を使うと、HTMLの意味論が薄れてしまうため注意が必要です。例えば、フッターの補助的なリンクには通常nav要素は使いません。サンプルコードのように、内部に見出しやリストを用いて構造化すると、スクリーンリーダーなどの補助技術利用者にも内容が伝わりやすくなり、アクセシビリティ向上に繋がります。一つのページに複数のnav要素がある場合は、aria-label属性でそれぞれの目的を明示することも有効です。
HTML navタグで主要ナビゲーションを定義する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>navタグのサンプル</title> 7</head> 8<body> 9 <!-- navタグは、主要なナビゲーションリンクのセクションを定義します。 --> 10 <!-- この例では、ウェブサイトのメインメニューとして使用しています。 --> 11 <nav> 12 <ul> 13 <li><a href="#home">ホーム</a></li> 14 <li><a href="#about">会社概要</a></li> 15 <li><a href="#services">サービス</a></li> 16 <li><a href="#contact">お問い合わせ</a></li> 17 </ul> 18 </nav> 19 20 <main> 21 <h1>ウェブサイトの主要コンテンツ</h1> 22 <section id="home"> 23 <h2>ホーム</h2> 24 <p>ホームセクションのコンテンツ。</p> 25 </section> 26 <section id="about"> 27 <h2>会社概要</h2> 28 <p>会社概要セクションのコンテンツ。</p> 29 </section> 30 <section id="services"> 31 <h2>サービス</h2> 32 <p>サービスセクションのコンテンツ。</p> 33 </section> 34 <section id="contact"> 35 <h2>お問い合わせ</h2> 36 <p>お問い合わせセクションのコンテンツ。</p> 37 </section> 38 </main> 39</body> 40</html>
HTMLのnavタグは、主要なナビゲーションリンクのセクションを定義するために使用されます。これは、ウェブサイトのメインメニューや目次、サイト内を移動するための重要なリンクの集合など、ユーザーがコンテンツ間を移動するために不可欠な部分を意味的にマークアップする際に活用されます。navタグを用いることで、検索エンジンやスクリーンリーダーといった補助技術に対して、そのコンテンツがナビゲーションの役割を持つことを明確に伝えることができ、サイトの構造理解やアクセシビリティの向上に貢献します。
サンプルコードでは、<nav>タグがウェブサイトのグローバルナビゲーションを囲んでいます。「ホーム」「会社概要」「サービス」「お問い合わせ」といった項目が<ul>と<li>でリスト化され、それぞれ<a>タグで対応するセクションへのリンクとして設定されています。このように、ユーザーがウェブサイト内の主要なコンテンツへアクセスするためのリンク群を、navタグで一つのまとまりとして定義することが推奨されます。
navタグは、HTMLの他の要素と同様に、特定の引数を直接受け取って挙動を変えたり、何らかの値を戻り値として返したりする性質のものではありません。このタグは、コンテンツの意味と構造を定義するための要素であり、その存在自体が情報の整理と伝達を目的としています。ウェブサイトのセマンティックな（意味的な）構造を正しく構築するために重要な役割を担っています。
navタグは、ウェブサイトの主要なナビゲーションリンクをまとめるために使います。例えば、グローバルメニューや目次などがこれに該当します。全てのリンクに適用するのではなく、フッターの補助的なリンク群などにはdivなど他の要素を使っても構いません。このタグは、ブラウザや検索エンジン、スクリーンリーダーにナビゲーションの役割を明確に伝え、ウェブページのアクセシビリティやSEOに貢献します。内部には通常、<ul>や<ol>と<li>を用いてリンクをリスト形式で記述するのが一般的です。複数の主要なナビゲーションがある場合は複数回使用可能ですが、それぞれの役割を明確に意識して使いましょう。