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¥
              

期待する画面

解説

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

ログインして解答を見る

補足

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

活動記録をTweetする