navタグについて

僕はnavタグについて調べましたので投稿します。

概要

HTMLのnavタグは、主要なナビゲーションリンクをまとめるために使用される要素です。

・目的　ウェブサイトの他のページ、または現在のページの異なるセクションへの主要なナビゲーションリンクのグループを定義します。

・用途　グローバルナビゲーション（ヘッダーメニュー）、サイドバーナビゲーション、フッターのナビゲーションリンク、パンくずリストなど、サイト内で重要なナビゲーション機能を持つ部分に使用されます。

・注意点　すべてのリンクの集合にnavを使用する必要はありません。例えば、ブログ記事のフッターにある関連リンクのように、主要ではないナビゲーションリンクの集合には通常navは使用しません。あくまで、サイトの主要なナビゲーションブロックに限定して使用することが推奨されています。

(Geminiより)

噛み砕くと

上の説明では小難しいのですが噛み砕くとこんな感じだと思います。

・主な目的

サイトの主な道案内（メニュー）をまとめる箱

・用途

ヘッダーやフッダー等にあるサイト全体に関わる重要なメニューに使う

・注意点

ページ内にあるリンクすべてをnavタグに入れる必要はない

間違った使い方の例

間違った使い方の例は以下のとおりです。

<body>
  <nav>
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
  </nav>

  <nav>
    <a href="#">前のページ</a>
    <a href="#">次のページ</a>
  </nav>

  <nav>
    <a href="#">関連リンク1</a>
    <a href="#">関連リンク2</a>
  </nav>
</body>

Q なぜ間違い？

A navタグを多用しすぎている

<nav>
  <h1>商品の紹介</h1>
  <p>このページでは、新商品をご紹介しています。</p>
  </nav>

Q なぜ間違い？

A divと混同して意味のないところで使っている

結構重要なタグでした

navタグはHTMLの中でも結構重要なタグでした。

divタグと混同してしまっていた時期もあったのですが全然違うものだったんですね。

難しいテーマでしたが勉強になりました。

コメント