HTMLでnavタグを複数使用する時の注意点を現役エンジニアが解説【初心者向け】

初心者向けにHTMLでnavタグを複数使用する時の注意点について解説しています。ナビゲーションを扱うnavタグの基本の書き方、適切な使い方について説明します。サイト構造の根幹となる部分なのでしっかりと理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTMLでnavタグを複数使用する時の注意点について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

navタグを複数使用する時の注意点について詳しく説明していくね!

大石ゆかり

お願いします!

 

HTMLでのnavタグの複数使用について

navタグは、navigation(ナビゲーション)の略語であり、画面のユーザーインターフェースとしてナビゲーションの役割のあるメニューに使用されています。

Webサイトの主要ページを巡れるようなリンクを「導線」と呼ばれています。

この「導線」の集合体(グループ)を専門用語としてグローバルナビゲーションと呼んでいます。

 

グローバルナビゲーションをnavタグにて定義すべきとされており、複数回使用することも可能です。

グローバルナビゲーションに該当しないリンクの集まりについては、navタグを使用すべきではありません。

また、この特質から入れ子構造として複数回使用するべきではありません。

 

使用する場面

See the Pen
2020-02-05-sample01
by YOHEI INAI (@yohei_inai)
on CodePen.

HTML5に対応していないブラウザが主流だった頃のHTML4.01までは、divタグでまとめられていました。

See the Pen
2020-02-05-sample02
by YOHEI INAI (@yohei_inai)
on CodePen.

HTML5に対応済みのブラウザでは、グローバルナビゲーションに該当する箇所については、navタでまとめることが可能です。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

使用注意点を学んで複数使ってみよう

前述の通り、入れ子構造として複数回使用されてしまうと本末転倒になります。以下、記述すべきではないHTMLの構造です。

<nav class="global">
  <nav>
    <nav><a href="#">TOP</a></nav>
    <nav><a href="#">Info</a></nav>
    <nav><a href="#">Contact</a></nav>
  </nav>
</nav>

前述にも提示しましたサンプルコードの通り、グルーバルナビゲーションの範囲を定めるように使用しましょう。

See the Pen
2020-02-05-sample02
by YOHEI INAI (@yohei_inai)
on CodePen.

 

執筆してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

HTMLでnavタグを複数使用する時の注意点がよく分かったので良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。