この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「IT用語」に対する知識は欠かせません。
あまり馴染みがない各分野のIT用語を、なるべく専門用語を使わずに解説していきます。
この記事の対象読者
Web制作を始めたばかりの人。
自社のWebマーケティングを任された人。
専門用語についていろいろ知りたい人。
Webマーケティングを行なっているが、言葉の定義を再確認したい人。
など、Webに限らずDXに携わるすべての方に。
navタグとは
navタグは、HTML5で導入されたセクショニング要素の1つで、”navigation”の略です。このタグは、ウェブページ上のナビゲーションリンクや、他のページへのリンクを含むセクションを示すために使用されます。例としては、サイトのメインメニュー（グローバルナビゲーション）やブログ記事の目次などが当てはまります。
ウェブサイトを訪れるユーザーにとって、ナビゲーションタグは非常に重要な要素です。これは、ユーザーがサイト内を簡単に移動できるようにするためのもので、ウェブサイトのユーザビリティを大幅に向上させます。また、ナビゲーションタグはSEOにも影響を与え、サイトのランキングを向上させる可能性があります。
navタグの必要性
navタグの採用によって、検索エンジンや支援技術（例：スクリーンリーダー）がウェブページの構造をより正確に把握することが可能になります。HTML5以前では、divタグが一般的に使用されていましたが、navタグなどのセクショニング要素を使用することで、ウェブページが構造的に明瞭になり、結果としてユーザーにとって分かりやすく、検索エンジンにとっても最適化されます。
navタグは必須ではありませんが、実装することでアクセシビリティ向上とSEOにメリットがあるため、推奨されています。
以下は、navタグの使用のメリットと、使用しない場合に考慮すべき点です。
navタグを使用するメリット
- アクセシビリティの向上：navタグを使用することで、スクリーンリーダーやその他の支援技術を使用しているユーザーに対してページのナビゲーションセクションを明確に伝えることができます。これにより、ユーザーがページ内を簡単に移動できるようになります。
- SEOの向上： navタグを使用することで、検索エンジンがページの構造を理解しやすくなります。これにより、ページの検索エンジンランキングが向上する可能性があります。
navタグを使用しない場合に考慮すべきこと
- ウェブページは機能しますが、スクリーンリーダーを使用するユーザーや検索エンジンにとって、ページ内のナビゲーション部分を特定するのが難しくなる可能性があります。
- divタグやその他のタグでナビゲーションを作成する場合、追加のaria属性やクラス名を使用して構造を明確にすることがで、navタグを代用することができます。
セクショニング要素の概要
HTMLにはnavタグ以外にも、以下のようなセクショニング要素が存在します。
- articleタグ：記事やブログポストなど、独立したコンテンツを示すために使用します。
- asideタグ：ページのメインコンテンツとは直接関連しないが、補足情報として提供する要素に使用します。
- sectionタグ：ウェブページ内の関連するコンテンツをグループ化するために使用されます。
- headerタグ：セクションやページ全体のヘッダー要素（タイトル、サブタイトル、ナビゲーションなど）を示すために使用します。
- footerタグ：セクションやページ全体のフッター要素（著作権情報、関連リンクなど）を示すために使用します。
navタグの使い方
以下はnavタグを使用した簡単なコード例です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<header>
<h1>タイトル</h1>
</header>
<!—ナビけージョンメニューにnavタグを使う -->
<nav>
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="about.html">サービス</a></li>
<li><a href="services.html">会社概要</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
<main>
<!—コンテンツが入ります -->
</main>
<footer>
<p>Copyright ©サンプル株式会社 </p>
</footer>
</body>
</html>
この例では、navタグがウェブページのメインナビゲーションメニューをマークアップしています。ulタグを使ってリスト形式でリンクを表示していますが、ulタグを使わないで直接aタグを使用することもあります。
さらなる改良として、アクセシビリティを向上させるために、aria-label属性を使用することができます。
<nav aria-label="メインメニュー">
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="about.html">サービス</a></li>
<li><a href="services.html">会社概要</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
使用上の注意
navタグは複数回使用可能
メインナビゲーションのみならず、ページ内の目次や関連リンクセクションなどにも使用することができます。
主要なナビゲーションにのみ限定して使用推奨
navタグはページ内で複数回使用することが可能ですが、主要なナビゲーションに限定して使用しましょう。サイドバーの関連リンクなどにはnavタグを使用しない方が良い場合もあります。
フッターにnav要素は使わない
フッター内のリンクには通常、navタグは使用しません。これは、フッター内のリンクが主要なナビゲーションとは異なる情報を提供することが多いためです。
スクリーンリーダーなどではnavタグは読み上げから省略される
スクリーンリーダーではnav要素が読み上げから省略されることがあります。これを補完するために、”aria-label”属性を使用してnavタグの内容を明確にするとよいでしょう。
見出しはいらない
navタグ内に見出しタグ（h1-h6）を配置する必要は基本的にありませんが、ナビゲーションセクションが非常に大きく、見出しによって構造を明確にする場合は、見出しタグを使用することも考えられます。
navタグはブロックレベル要素
navタグはインライン要素ではなく、主にページのナビゲーションリンクをグループ化するために使用されるブロックレベル要素です。
ブロックレベル要素とは、ページの主要な構造を形成するために使用され、見出し、段落、リスト、ナビゲーションなどを含みます。通常は、新しい行から始まり、その前後に改行が入る要素です。可能な限り親要素の幅いっぱいに広がります。navタグもこのカテゴリに属しており、通常、周囲のコンテンツとは異なる行に表示されます。
一方で、インライン要素はテキストの流れの中に表示される要素で、新しい行を作成せず、コンテンツの幅に従って表示されます。テキストや画像などの小さな要素を装飾または強調するためによく使用されます。例えば、aタグや spanタグなどがインライン要素に分類されます。
まとめ
navタグは、HTML5で導入されたセクショニング要素の1つで、ウェブページ上の主要なナビゲーションリンクを示すために使用されます。
navタグは必須ではありませんが、ウェブページのアクセシビリティとSEO向上をサポートします。主要なナビゲーションリンクにはnavタグを使用することが良いでしょう。
