この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「IT用語」に対する知識は欠かせません。
あまり馴染みがない各分野のIT用語を、なるべく専門用語を使わずに解説していきます。
この記事の対象読者
Web制作を始めたばかりの人。
自社のWebマーケティングを任された人。
専門用語についていろいろ知りたい人。
Webマーケティングを行なっているが、言葉の定義を再確認したい人。
など、Webに限らずDXに携わるすべての方に。
navタグとは
navタグは「navigation」の略で、HTML5で新たに追加されたセクショニングに関するタグで、ナビゲーションリンクや他ページへリンクするセクションに使用します。
例えばページ内のメニュー（グローバルナビゲーション）や、記事の目次などが当てはまります。
navタグの必要性
navタグはHTML5で追加された、セクショニングタグの一つです。セクショニングタグと使って文章のまとまりを囲うことで、検索エンジンやスクリーンリーダーなどのプログラムがより正確に文書構造を理解することができます。HTML5以前は、divタグを用いていましたが、セクショニングタグを使用することで、より検索エンジンなどにフレンドリーなWebサイトになります。
navタグは主要なナビゲーションに使用するセクショニングタグ
セクショニングを示すタグにはnavタグの他に、「articleタグ」、「asideタグ」、「sectionタグ」、「headerタグ」、「footerタグ」などがあります。それぞれのセクショニングタグには以下のような役割があります。
- articleタグ: 文書の内容が自己完結したコンテンツを示す。ブログ記事全体など
- asideタグ：補足情報などを表す。無くてもコンテンツの本筋の意味は通じる要素に使う。
- sectionタグ: ページ内のまとまったセクションを表す。汎用性が高い。
- headerタグ：文書やセクションのヘッダーを表す。文書の冒頭にある見出しやナビゲーションのリンクなどに使う
- footerタグ：直近のセクションに関する情報を示す。関連リンクや著作権情報など。
navタグはセクショニングタグの中でも特に使い所が明確で、ページ内の主要なナビゲーションリンクにのみ使用します。
navタグの使い方
navタグの使用例は以下のとおりです。
<body>
<nav>
<ul>
<li><a href=”#”>トップ</a></li>
<li><a href=”#”>サービス</a></li>
<li><a href=”#”>会社概要</a></li>
<li><a href=”#”>お問い合わせ</a></li>
</ul>
</nav>
</body>
上記のようにナビゲーションリンクをnavタグで囲います。ちなみにナビゲーションリンクはulタグで作成するのが一般的です。
navタグの注意点
navタグを使用する際に気をつける点がいくつかあります。
navタグは複数回使用可能、ただしすべてのリンクに使用しない
navタグはページ内で何回使っても構いませんが、あくまでも「主要なナビゲーション」にのみ使用してください。
フッターにnav要素は使わない
Webサイトのフッターにはリンクを設置するのが一般的かと思いますが、フッターを示す「footerタグ」はリンクのリストを含むのが前提のため、footerタグ内でnavタグを使用する必要はありません。
スクリーンリーダーではnavタグは読み上げから省略される
スクリーンリーダーはnav要素を認識すると、読み上げから省略することがあります。
見出しはいらない
セクショニングタグを使用する際は、HTMLのアウトラインを生成するため、基本的にh1～h6の見出しタグを設置する必要がありますが、navタグには見出しタグを設置しなくても問題ありません。
まとめ
セクショニングタグであるnavタグは、ナビゲーションリンクのセクションを表します。設定することで検索エンジンやスクリーンリーダー等のプログラムが文書構造を理解しやすくなるので抑えておきましょう。
