[必要?] htmlのnav要素とは? 使い方・複数使用する時の注意点も分かりやすく解説!

nav要素について知りたい人

nav要素について知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること
  • nav要素とは? 読み方は?
  • nav要素の使い方や複数使用する時の注意点

nav要素は「navigation」の略でWebサイト内の他のページへのリンクやページ内リンクなどを設置する際に利用します。

nav要素を利用して主要コンテンツのリンクを用意しておくことでユーザーがコンテンツを探す手間を省いてくれます。

nav要素はとても重要な要素の一つなのでしっかりと理解しておきましょう!

そこでこの記事ではnav要素について解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

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

1.nav要素とは? 読み方は?

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

読み方は「ナブヨウソ」です。

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

nav要素はユーザーが必要なページを探し移動するのを手助けする役割があります。

nav要素はWebページ内で複数使っても大丈夫ですが、全てのリンクのリストに使うわけではありません。

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

検索エンジンもnav要素を基にWebサイトのメインメニューを見つけ、サイトの構造を把握するためにリンクをチェックするかもしれません。

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を使用することができます。
  • スクリーンリーダーのような障碍者向けのユーザーエージェントは、この要素を使用してナビゲーション用のコンテンツを初期読み上げから省略するかを判断するために使用することがあります。

nav要素はサイトメニューなどの主要なナビゲーションに対して使用します。

一般的にサイトメニューはヘッダー内に配置されますが、サイドバーやフッターなど、どこであっても問題はありません。

複数使用する時の注意点

結論

nav要素は複数回使用することが可能です。

 

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

 

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

Webページの中にナビゲーションメニューが複数あるということが多いです。

Webページ最上部にあるグローバルナビゲーション、メインコンテンツの横にあるローカルナビゲーションというように、複数のナビゲーションメニューを持っています。

しかし、すべてをnav要素で囲むというわけではありません。

例えば、Webサイトのフッターに、会社案内・プライバシーポリシー・お問い合わせなど2~3個のリンクを入れたりしますが、この場合は footer要素だけで大丈夫です。

 

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

 

HTMLやCSSを利用してWebサイト制作の副業に挑戦してみたいという方はいませんか!?

そんな方に「はじめての副業コース」をオススメします。

なんとHTMLやCSSを学べるだけでなく、案件紹介も行ってくれます!

Webサイト制作で稼ぎたいという方は是非「はじめての副業コース」を受講してみてはいかがでしょうか!?

コメントを残す

メールアドレスが公開されることはありません。