navタグとは

この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「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タグは、ナビゲーションリンクのセクションを表します。設定することで検索エンジンやスクリーンリーダー等のプログラムが文書構造を理解しやすくなるので抑えておきましょう。

メールやホームページの
「困った!」を解決しませんか?

お取引企業20,000を超える実績を持つスピーバーでは、豊富な知識を持ったIT業務の専門家が 複雑な手続きや設定をサポートし、お客様の挑戦と成長を応援いたします。

スピーバーに相談する
よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

肩書:Webエンジニア兼Webライター
名前:さのくん
経歴:大学在学中にオペレーションズリサーチ分野を学ぶ過程でプログラミングを習得。
その後は不動産業界に従事しつつ、サイドビジネスとしてWebエンジニアを兼業。フロントエンド開発を得意とする。
Webライティング歴:1年超で執筆数は累計30記事を超える
使用言語:C言語, HTML/CSS/Sass, Javascript, Typescript, PHP, Shopify(Liquid HTML)

まずはお気軽に
お問い合わせください

スピーバーのサポートデスクでは、レンタルサーバーに関するご質問やご相談だけでなく、
お客様のオフィス内でのお困りごと全般のご相談を受付けています。

パソコンの操作、メールの設定、迷惑メールやスパムメールが多くて困るといった、
日常業務でのお困り事をお気軽にご相談ください。

お電話での
お問い合わせは
スピーバーお問い合わせ電話番号:0120-63-1138
0120-63-1138
9:00~18:00(祝祭日を除く月曜日~金曜日)
目次