こんにちは。
Webページのマークアップにおいて、HTMLのセマンティックタグは出来るだけ適切に使いたいところです。これはページの構造を明確にし、検索エンジンやスクリーンリーダーがページの内容を理解しやすくするためです。SEOにも大きな影響を与えます。
さて、セマンティックタグに関連する話の中でも今回はサイドバーを何タグで実装すべきかについて改めて考えていきましょう。特に考えずにasideタグで実装されるケースが多いと思いますが、実は違うケースがあると思っていて、それを解説していこうと思います。
概要
タイトルで煽っておきながら、基本的にはasideで良いケースが多いかと思います。
ただしサイトのトップページなど一部の場合においてはasideタグではない方が良いケースがあるかなと考えています。
解説
改めてasideタグの役割を確認する
asideタグは「ページのメインコンテンツには直接関連しない部分」を表現するためにHTML5で導入されました。これは、補足情報や関連リンクなど、メインコンテンツとは独立した追加情報を示すのに適しています。
もしそれが存在しなくてもメインコンテンツの流れには影響ないということです。
例えば記事ページにおいては、記事の内容以外の多くがasideタグで実装すべきものとみなしていいでしょう。具体的には、
- 関連記事
- コメント欄
- etc
などです。
asideタグについての詳細についてはこちら。
一部のページ（トップページなど）においてはサイドバーはメインコンテンツかもしれない
大抵の場合、トップページは各ページへのナビゲーションを担っていると思います。例えば各セクションは見出しとリード文があって、詳細を載せた各ページへのリンクがあったりします。
そしてブログやメディアサイトではその一部としてサイドバーがよく見られます。例えば本ブログのトップページの下部を見てみると、サイドバーには「検索バー」「各カテゴリーへのリンク」「最新のコメント」「人気記事」などが含まれています。まさに各ページへのナビゲーションを行っていますし、さらに上記のいくつかはこのサイドバーにしかリンクが存在しなかったりします（下画像）。
この視点から見ると、サイドバーをasideタグでマークアップするのは必ずしも適切ではないかもしれません。サイドバーがメインコンテンツの一部と見なすことができるからです。
それをマークアップするための適切なタグは、例えばsectionタグやnavタグになるでしょう。これらのタグはそれぞれ「ページ内の独立したセクション」と「ナビゲーションリンクの集合」を表現するためのものです。参考にそれぞれのMDNの記事を貼っておきます。
そういうわけで、サイドバーだったらいつでもどこでもasideタグかというとそうではないと言えそうです。
まとめ
HTMLのセマンティックなマークアップは、WebページのアクセシビリティやSEOに大きな影響を与えます。前述の通り、Webページの構造を明確にし検索エンジンがページの内容を正確に理解するための重要な情報だからです。
サイドバーのマークアップについても、その役割と内容に基づいて最適なタグを選択することが求められます。各要素がどのセマンティックタグを使うべきかの判断は非常に難しいのですが、今回の記事をぜひ参考にしてみてください。
また、こういった細かいテクニックをもっと知ってレベルアップしたい方はぜひこちらの本で勉強してみてください！
コメント