2019年10月24日

navタグの使い方|フッターやサイドバーにも使うべきなの?

navタグの使い方|フッターやサイドバーにも使うべきなの?

navタグの使い方

お世話になっております。佐藤です。

今回は私自身も使い方に迷うnavの使い方について書いていこうと思います。

MDNには以下のように定義されています。

HTML の <nav> 要素は、現在の文書内の他の部分や他の文書へのナビゲーションリンクを提供するためのセクションを表します。ナビゲーションセクションの一般的な例としてメニュー、目次、索引などがあります。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/nav

ただ、上の説明を読んでもなんかピンときません。

使用上の注意

・すべてのリンクを <nav> 要素に入れる必要はありません。 <nav> はナビゲーションリンクの主要なブロックのみに用います。 <footer> にもよくリンクのリストが設置されますが、 <nav> 要素の中に入れる必要はありません。
<nav> 要素は文書内に複数設定することができます。例えば、サイトナビゲーションを一つ、ページ内ナビゲーションを一つなどです。このような場合、アクセシビリティを強化するために、 aria-labelledby を使用することができます。をご覧ください。
・スクリーンリーダーのような障碍者向けのユーザーエージェントは、この要素を使用してナビゲーション用のコンテンツを初期読み上げから省略するかを判断するために使用することがあります。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/nav

使用上の注意をみても、私はまだ感覚的に分かりませんでした。

なので使用例を参考にすることが最善かなと思いますので、使用例をみて、どんな使い方ができるか見ていきましょう。
MDNの使用例では以下のようにパンくずリストで使用されています。

実際の使用例

パンくずリスト

<nav class="crumbs">
  <ol>
    <li class="crumb"><a href="#">Bikes</a></li>
    <li class="crumb"><a href="#">BMX</a></li>
    <li class="crumb">Jump Bike 3000</li>
  </ol>
</nav>

つまりパンくずリストは主要なナビゲーションとの理解で大丈夫なようです。

<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

また、上のような使い方もされていました。
この使用例からみても、ヘッダーのグローバルメニューには使用すべきなのではないかと私は考えております。弊社のグローバルメニューにも<nav>を使用しております。

<footer>での使用

しかし、<footer>に関しては悩みどころです。
<footer>にも<nav>を使用しているコードやサイトをみたことは結構あります。ただ、MDNにもあると通り、プライバシーポリシーなどの補足的なリンクの集合には使わなくていいことは理解できますが、弊社の<footer>(以下画像)のような場合はどうでしょうか?

SeekNext合同会社のフッター画像

弊社のfooterには主要なページへのリンクを載せています。

皆さんはどのように考えますか?

これは私の見解に過ぎませんが、弊社では<nav>を使用しておりません。確かに微妙なところではあるとは思いますが、そもそも<footer>にある時点でそのページの主要なナビゲーションではないという見解です。

サイドバー

また、サイドバーの使用に関してはどうでしょうか?
これも正直、微妙かなと私は考えております。<sidebar>は<aside>で囲むことが多いと思いますが、その時点で主要なナビゲーションなのかな?という疑問は私の中であります。

ただ、サイドバーでの使用に関してはそこまで否定的でもありません。個人の理解の仕方や好みやどんな文書なのかによっても変動してくるでしょう。

navタグの使い方に関してまとめ

いかがでしたか?このようにHTMLを毎日書いている人間でも基本のタグの使い方には迷います。私は以上のような考えをしておりますが、全く別の考えを持って<nav>を使用している方も多いと思います。(宜しければ皆様からのご意見をお待ちしております。)

検索エンジンに適切に文書構造や意味を伝える為にもコーディングは大切な作業です。しかし、Googleの責任者様は頻繁に、「少しタグの使い方を間違っていただけでSEOに悪影響を及ぼすことない」と断言されていますし、被リンクを増やすというような小手先の方法ではなく、良いコンテンツ(ユーザーが求めている情報、ページ)を評価するという方向に今後も向かっていくことは間違えありません。

HTMLタグの使い方に固執する必要なないと思いますが、少しでもHTMLを書いている方にとって参考になれば幸いです。