ログイン
問題4

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

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

アイコン画像

本のアイコンnavタグとは

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

本のアイコングローバルナビゲーションとは

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

HTMLの問題に挑戦しよう!

以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTMLマスターへの道の第一歩となるでしょう。

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

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

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

エディターのアイコンあらかじめエディタに書くコード

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

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

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

コメントのアイコン解説

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

コメントのアイコン補足

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

LINE登録で、Web制作に役立つコンテンツ配信中‼

LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!