2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

nav要素とは? 分かりやすく解説します!

nav要素の評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)




1.nav要素とは?

nav要素は、主要なナビゲーションを表す要素です。

ナビゲーションセクションの一般的な例としてメニュー、目次、索引などに利用されます。

このnav要素はページ内でひとつしか使ってはいけないということはありませんが、全てのリンクのリストに使うわけでもありません。

あくまで主要なナビゲーションをマークアップしています。




2.nav要素の使い方

以下の例では、リンクの番号なしリストを包含するためにnav要素を使用しています。

・・・

<nav>
 <ul>
  <li><a href="#">HOME</a></li>
  <li><a href="#">COMPANY</a></li>
  <li><a href="#">PRODUCT</a></li>
  <li><a href="#">CONTACT</a></li>
 </ul>
</nav>

・・・
使用時の注意点
  • すべてのリンクをnav要素に入れる必要はありません。 nav要素はナビゲーションリンクの主要なブロックのみに用います。footer要素にもよくリンクのリストが設置されますが、nav要素の中に入れる必要はありません。
  • nav要素は文書内に複数設定することができます。例えば、サイトナビゲーションを一つ、ページ内ナビゲーションを一つなどです。このような場合、アクセシビリティを強化するために、 aria-labelledbyを使用することができます。
  • スクリーンリーダーのような障碍者向けのユーザーエージェントは、この要素を使用してナビゲーション用のコンテンツを初期読み上げから省略するかを判断するために使用することがあります。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です