【HTML】何故ナビゲーションバーの作成にリストタグ(ul li)が使われるのか調べてみた【SEOでした】

SEO
スポンサーリンク

こんにちは朱夏です。

今回は、HTMLのナビゲーションバーを作成する時に、何故リストタグ(ul,li)を使って作成するのかを調べてみました。

朱夏
朱夏

ナビゲーションバーをリストタグを使って作るのは何故だろう?

頭についている点を消したり、横並びにしたりするのが手間なんだよね・・・。

 

最近のHTMLコーディングでは、ナビゲーションバーはリストタグで作成するのが当たり前になっています。
しかし、どうしてかと聞かれると、理由までは知りませんでした。

気になったので調べた結果、SEOに関わってくる話の様です。
それではいってみましょう。

[もくじ]
リストタグを使う2つの理由
何故リストタグなのか
あとがき

 

リストタグを使う2つの理由

横並びならインラインのタグを使用した方が作りやすいですし、リストには点がデフォルトでついてしまうので、殆どの場合、CSSで消さないといけません。

そんなめんどくさいタグを使用してナビゲーションバーを作るのは何故か。

その理由は、以下の2つに集約されていました。

  • 検索エンジンが重要なリストとして理解する
  • スクリーンリーダーが読みやすくなるから

 

スクリーンリーダーとは、視覚に障害を持った方用の読み上げソフトのことです。

両方とも、機械が読みやすいという部分については共通しています。

 

何故リストタグなのか

では、何故ナビゲーションバーをリストタグで作ると読みやすくなるのでしょうか?

HTML5では通常、ナビゲーションバーは<nav>~</nav>の中に書きます。
その中で、リストタグを使って書くと、リンクのリストとして認識されるようになります。

リストタグは検索エンジンから重要だと判断されるので、各コンテンツのタイトルなど重要なキーワードを必然的に入れることになるナビゲーションバーには最適な方法です。

また、スクリーンリーダーではリスト部分の読み上げ時にリストの項目数を読み上げるものもあるので、他のタグを使うより、リストタグを使った方が良い様です。

 

あとがき

というわけで、HTMLのナビゲーションバーをリストタグで作成する理由を調べてみました。

検索エンジンに理解してもらえれば、SEOにも役に立ちます。

当たり前の様に使っているものでも、意味が解るとまた違って見えてくると思います。

今回は以上です。
次回もよろしくお願いします。

 

タイトルとURLをコピーしました