問題
4navタグを使ってナビゲーションを定義しよう
この問題では、ホームページなどでよく見られるナビゲーションの定義方法について学習していきます。 以下の問題に挑戦して、navタグを使用する意味を理解しよう。
ポイント
navタグとは
navタグとは、navigationタグの略でnavタグで囲んだ部分がナビゲーションであることを示す際に使用するHTMLのタグです。
ナビゲーションとは具体的に、ウェブサイト内の他のページへのリンク、ページ内リンクなどのことを指します。
HTMLではnavタグを使ってナビゲーションを示すことで、開発者側の可読性が上がり、クローラーも構造を理解しやすくなります。
グローバルナビゲーションとは
グローバルナビゲーションとは、Webサイトの全ページに共通して表示されるメニューのことです。
一般的にはサイトの上部（ヘッダー部分）、サイドバー、ページ下端にメニューボタンやテキストなどで表示されます。
HTMLの問題に挑戦しよう！
問題
「navタグを使ってナビゲーションを定義しよう」
navタグを使ってグローバルナビゲーションを作成しましょう。
グローバルナビゲーションとはWebサイト内の主要なページへ遷移するリンク集です。
主にWebサイトのヘッダー部分で使われています。
表示されているリンク集をグローバルナビゲーションとして定義しましょう。
今回aタグのリンク先は空のままで問題ありません。
あらかじめエディタに書くコード
<a href="">トップページ</a>
<a href="">コース内容</a>
<a href="">Q&A</a>
<a href="">お問い合わせ</a>
¥HTML¥
期待する画面
解答と解説
解説
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
グローバルナビゲーションを定義するには
ul・liで作成したリストをnavタグで囲うだけでOKです。
navタグがなくても機能しますが、書いている場合のメリットもいくつかあるので必ず書くようにしましょう。
補足
navタグを使用せずにナビゲーションを定義することも可能ですが
navタグを使って定義することで、コンピュータに「ここはナビゲーションですよ」と
明示することができ、SEOにも有効となります。
また、作成者側にとってもnavタグで定義されていることによって
構造を理解しやすくなるというメリットがあります。
