問題

4
HTML

navタグを使ってナビゲーションを定義しよう

この問題では、ホームページなどでよく見られるナビゲーションの定義方法について学習していきます。 以下の問題に挑戦して、navタグを使用する意味を理解しよう。

HTMLの問題に挑戦しよう!

問題

navタグを使ってナビゲーションを定義しよう

navタグを使ってグローバルナビゲーションを作成しましょう。
グローバルナビゲーションとはWebサイト内の主要なページへ遷移するリンク集です。
主にWebサイトのヘッダー部分で使われています。

表示されているリンク集をグローバルナビゲーションとして定義しましょう。
今回aタグのリンク先は空のままで問題ありません。

あらかじめエディタに書くコード

                    <a href="">トップページ</a>
<a href="">コース内容</a>
<a href="">Q&A</a>
<a href="">お問い合わせ</a>
¥HTML¥
                

期待する画面

解答の画像

解答と解説(navタグを使ってナビゲーションを定義しよう)

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

グローバルナビゲーションを定義するには
ul・liで作成したリストをnavタグで囲うだけでOKです。
navタグがなくても機能しますが、書いている場合のメリットもいくつかあるので必ず書くようにしましょう。

補足

navタグを使用せずにナビゲーションを定義することも可能ですが
navタグを使って定義することで、コンピュータに「ここはナビゲーションですよ」と
明示することができ、SEOにも有効となります。
また、作成者側にとってもnavタグで定義されていることによって
構造を理解しやすくなるというメリットがあります。

ポイント

navタグとは

navタグとは、navigationタグの略でnavタグで囲んだ部分がナビゲーションであることを示す際に使用するHTMLのタグです。
ナビゲーションとは具体的に、ウェブサイト内の他のページへのリンク、ページ内リンクなどのことを指します。
HTMLではnavタグを使ってナビゲーションを示すことで、開発者側の可読性が上がり、クローラーも構造を理解しやすくなります。

グローバルナビゲーションとは

グローバルナビゲーションとは、Webサイトの全ページに共通して表示されるメニューのことです。
一般的にはサイトの上部(ヘッダー部分)、サイドバー、ページ下端にメニューボタンやテキストなどで表示されます。

さらにスキルアップしたい方は公式LINEから「HTML」と送信すると動画が見れます。

LINE登録して動画を視聴する
学習の事・キャリアの事、何でもOK!無料相談に申し込む