Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【HTML Living Standard】nav要素の使い方

nav要素の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

navオブジェクトは、HTML文書内でナビゲーションリンクのセクションを表すオブジェクトです。この要素は、ウェブサイトの主要なナビゲーションブロックをマークアップするために使用され、訪問者がサイト内を効率的に移動するための重要なリンクのグループを含みます。例えば、グローバルナビゲーション、目次、パンくずリスト、またはページ内ジャンプリンクといった、サイト構造の中心となるリンク群がこれに該当します。

nav要素を用いることで、HTML文書の構造がセマンティックに明確化されます。これは、検索エンジンがページのコンテンツをより正確に理解するのに役立つだけでなく、特にスクリーンリーダーを使用するユーザーにとって、ウェブページのアクセシビリティを大幅に向上させます。スクリーンリーダーはnav要素を認識し、ユーザーが主要なナビゲーションエリアを簡単に特定し、スキップしたり直接アクセスしたりする機能を提供できるため、視覚的な情報に頼れない利用者もウェブサイトを効率的に探索できるようになります。

ただし、nav要素は全てのリンクを囲むために使うべきではありません。例えば、フッターに記載される著作権情報へのリンクや、本文中の一般的なハイパーリンクなどは、nav要素の適用範囲外です。通常、文書内の主要なナビゲーションブロックに限定して使用することが推奨されます。一つのHTML文書内に複数のnav要素が存在しても問題ありませんが、それぞれのnav要素が異なる種類のナビゲーションを表す場合、aria-label属性などを用いてその目的を明示することで、アクセシビリティをさらに高めることができます。この要素は、ユーザーにとって使いやすく、機械にも理解しやすいウェブページを構築するために不可欠な役割を担っています。

公式リファレンス: <nav>: The Navigation Section element

構文(syntax)

1<nav>
2  <!-- ナビゲーションリンクを含むフローコンテンツ -->
3</nav>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ