サイドバーは本当にasideタグなのか

HTML/CSSを学ぶ

こんにちは。

Webページのマークアップにおいて、HTMLのセマンティックタグは出来るだけ適切に使いたいところです。これはページの構造を明確にし、検索エンジンやスクリーンリーダーがページの内容を理解しやすくするためです。SEOにも大きな影響を与えます。

さて、セマンティックタグに関連する話の中でも今回はサイドバーを何タグで実装すべきかについて改めて考えていきましょう。特に考えずにasideタグで実装されるケースが多いと思いますが、実は違うケースがあると思っていて、それを解説していこうと思います。

概要

タイトルで煽っておきながら、基本的にはasideで良いケースが多いかと思います。

ただしサイトのトップページなど一部の場合においてはasideタグではない方が良いケースがあるかなと考えています。

解説

改めてasideタグの役割を確認する

asideタグは「ページのメインコンテンツには直接関連しない部分」を表現するためにHTML5で導入されました。これは、補足情報や関連リンクなど、メインコンテンツとは独立した追加情報を示すのに適しています。

もしそれが存在しなくてもメインコンテンツの流れには影響ないということです。

例えば記事ページにおいては、記事の内容以外の多くがasideタグで実装すべきものとみなしていいでしょう。具体的には、

  • 関連記事
  • コメント欄
  • etc

などです。

asideタグについての詳細についてはこちら。

: 余談要素 - HTML: ハイパーテキストマークアップ言語 | MDN
は HTML の要素で、文書のメインコンテンツと間接的な関係しか持っていない文書の部分を表現します。サイドバーやコールアウトボックスなどを表現するためによく使われます。

一部のページ(トップページなど)においてはサイドバーはメインコンテンツかもしれない

大抵の場合、トップページは各ページへのナビゲーションを担っていると思います。例えば各セクションは見出しとリード文があって、詳細を載せた各ページへのリンクがあったりします。

そしてブログやメディアサイトではその一部としてサイドバーがよく見られます。例えば本ブログのトップページの下部を見てみると、サイドバーには「検索バー」「各カテゴリーへのリンク」「最新のコメント」「人気記事」などが含まれています。まさに各ページへのナビゲーションを行っていますし、さらに上記のいくつかはこのサイドバーにしかリンクが存在しなかったりします(下画像)。

itokoba.comのトップページの一部。左側には記事一覧があり、右にはサイドバーがある。

この視点から見ると、サイドバーをasideタグでマークアップするのは必ずしも適切ではないかもしれません。サイドバーがメインコンテンツの一部と見なすことができるからです。

それをマークアップするための適切なタグは、例えばsectionタグやnavタグになるでしょう。これらのタグはそれぞれ「ページ内の独立したセクション」と「ナビゲーションリンクの集合」を表現するためのものです。参考にそれぞれのMDNの記事を貼っておきます。

: 汎用セクション要素 - HTML: ハイパーテキストマークアップ言語 | MDN
は HTML の要素で、文書の自立した一般的なセクション(区間)を表します。そのセクションを表現するより意味的に具体的な要素がない場合に使用します。少数の例外を除いて、セクションには見出しを置いてください。
: ナビゲーションセクション要素 - HTML: ハイパーテキストマークアップ言語 | MDN
は HTML の要素で、現在の文書内の他の部分や他の文書へのナビゲーションリンクを提供するためのセクションを表します。ナビゲーションセクションの一般的な例としてメニュー、目次、索引などがあります。

そういうわけで、サイドバーだったらいつでもどこでもasideタグかというとそうではないと言えそうです。

まとめ

HTMLのセマンティックなマークアップは、WebページのアクセシビリティやSEOに大きな影響を与えます。前述の通り、Webページの構造を明確にし検索エンジンがページの内容を正確に理解するための重要な情報だからです。

サイドバーのマークアップについても、その役割と内容に基づいて最適なタグを選択することが求められます。各要素がどのセマンティックタグを使うべきかの判断は非常に難しいのですが、今回の記事をぜひ参考にしてみてください。

また、こういった細かいテクニックをもっと知ってレベルアップしたい方はぜひこちらの本で勉強してみてください!

【脱・初心者】教材だけでは分からない、案件でよく要求される細かいコーディングのテクニック30選 + α - セカヤサBooks
フリーランスのフロントエンドエンジニアとして7年間、サイト制作やWebアプリケーション開発の案件に携わってきた中で「これは伝えたい」と思ったコーディングのテクニックをまとめました! 正直言うと、これができているかどうかが「プロかプロでないか」を大きく分けます。逆に言えば、この本

コメント

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