セマンティックタグよりも大切なこと

はじめに

フロントエンドエンジニアとして、すべてのHTMLタグを完璧に暗記する必要はないが、よく使われるHTMLタグと利用シーンについてはある程度の理解が必要だ。例えば、<section>、<main>、<article>、h1〜h6、<aside>、<footer>、<a>、<button> などを状況に応じて使い分けることが求められる。

しかし、セマンティックタグを使う目的とは何だろうか？セマンティックタグについての多くの記事は表面的な議論、つまりどのタグをどこで使うべきかという話にとどまりがちだと僕は感じている。そのせいで、ウェブページ上のタグは見かけ上カラフルになったものの、ユーザー体験はそれに比例して向上していない。

これではフロントエンド開発者が、「セマンティックタグを使わないのは大罪だ」という誤った認識を持ってしまい、無意識に <div> や <span> を避けるようにさえなってしまうのではないかと思う。そこで、今回は僕自身の考えをいくつか共有したい。

歴史的な背景

初期のHTMLには、<b>、<font>、<center> といった非セマンティックなタグが多く存在していた。これらのタグには意味がなく、単にスタイルを装飾するためだけに使われていた。その後CSSが登場したことで、スタイルの処理をタグで記述する必要はなくなった。これが「セマンティックタグ」という言葉が生まれた最初の背景だろう。HTML5では、こうした純粋に装飾用だったタグはすでに削除されている。

セマンティックタグの目的

僕にとって、セマンティックタグは主に以下の目的を達成するためのものだ：

アクセシビリティ（Accessibility）：適切なHTMLタグを使うことで、スクリーンリーダーがコンテンツをより正確に読み上げられるようにする
検索エンジンがページ構造を理解するのを助け、ひいてはSEOを向上させる

そのため、この記事全体もこの2つの論点を中心に論じていく。

HTMLタグが足りない

ウェブページを構築する際、経験のある開発者はページの性質に応じて main、nav、aside、footer などに分け、ページの主要な構造を切り出す。フォームを作成するときも、経験のある開発者は label や対応する input などを適切に配置し、ブラウザのネイティブ機能をできる限り活用する。

こうした切り分け自体はもちろん何の問題もない。ただ、この表現方法では往々にして最も重要なことが見落とされがちだ。ウェブ上のインタラクションは非常に多様であり、既存のHTMLタグ単体では簡単に明確な表現ができないUIコンポーネントが数多く存在する。

フロントエンドエンジニアは上述の大原則に従ってレイアウトを組むことができるが、UIコンポーネントがHTMLタグでカバーされていない場合、「どのタグを使うのがベストなのか」という迷妄に陥りやすい。例えば、tooltip、carousel、notification bar、チャットルームといったUIコンポーネントは、どのタグで表現すればいいのだろうか？

これは開発で頻繁に直面する問題だが、多くの記事では触れられていない。

アクセシビリティ（Accessibility）の観点からアプローチする

セマンティックタグは目的ではなく、あくまで手段だ。僕にとって、セマンティクスの最も重要な目的はアクセシビリティを達成することにある。ネイティブのHTMLタグを使うことで、自前で実装する手間や不整合を減らし、最小のコストで最大の実装効果を得ることができる。

アクセシビリティの観点から見れば、問題の解決策は非常に明確になる。

アクセシビリティがしっかり確保されていれば、サイト全体をdivだけで作っても優れた体験を提供できる（理論上は可能だが、考慮すべきことやノウハウが多すぎるため、基本的にはそんなことはしない）。

アクセシビリティに踏み込まず、ただセマンティックタグを吹聴して回るのは、単にポリティカル・コレクトネス（正しさ）を追求したいだけのように僕には思える。

先ほど挙げた notification bar を例に考えてみよう。この場合、一体どのHTMLタグを使うべきだろうか？セマンティックタグを意識しすぎると、こうした曖昧な状況が頻繁に発生するし、そもそもこのUIを的確に表すタグが存在しないことだってある。

だが、アクセシビリティの観点から出発すれば、問題の本質がいくつかのポイントに絞られることがわかる：

スクリーンリーダーが notification bar の変化を検知できるか？
ユーザーがマウス以外の操作で notification bar を閉じられるか？（またはその他の方法）

これらはすべてユーザー体験に直接影響を与える要素だ。

このような状況においては、どのタグを使うべきかと悩むよりも、どうすればより良いユーザー体験を提供できるかに注力する方がはるかに重要だ。見た目が「高尚」に見えるHTMLタグを使ったからといって、実装が突如として完成するわけではない。

これはHTMLのセマンティックタグが重要ではないと言っているわけではない。main、section、article、header、footer などは、検索エンジンがページ構造を認識する上で大いに役立っている。

構造化データ（JSON-LD）の導入

ld-json とは、ウェブページに対応する <script> タグを追加し、その中でJSONを用いてページの構造を定義することで、検索エンジンがコンテンツをより解析しやすくするための手法だ。

ページのコンテンツを解析しやすくするだけでなく、レビュー評価やニュース、FAQなどのページにおいて、Googleなどの検索エンジンが専用のリッチリザルト（特化した検索結果画面）を直接生成できるようになり、ユーザーが必要な情報を見つけやすくする助けにもなる。

セマンティックタグとSEO

クローラーは h1、h2、h3 などの構造を参考にし、main のようなタグを通じてコンテンツを解析しようとする。そのため、開発者がある程度HTMLタグを理解しておく必要があるのは確かだ。

しかし、HTMLセマンティックタグを使う主な目的がSEOにあるのなら、フロントエンドエンジニアとしては、SEOに対してより大きな影響を与える以下の要素に注目すべきだ：

<head> 内に title、description、sitemap など、SEOに寄与するメタ情報が適切に含まれているか
TwitterやFacebookなどのプレビュー表示用に対応するOpen Graphメタタグが設定されているか
SSR（サーバーサイドレンダリング）が実装されているか
ページにJSON-LDを適用できるか？

ここに挙げた要素の方が、SEOに対する影響ははるかに顕著だ。

HTMLタグの構造は、SEOを完成させるための最後のピースにすぎない。もし検索エンジンがh1を極端に重視するなら、いっそのことサイト全体をh1だけで作ればいいという話になってしまう。

これから

将来的にさらに多くのHTMLタグが追加され、ブラウザがネイティブでサポートするUIも増えていくことが予想される。この記事で触れたtabやnotificationといったUIコンポーネントも、将来的には対応するタグが登場するかもしれない。しかし大原則は同じだ。ユーザーがUIとどのようにインタラクションするのか、ブラウザがどのような機能を提供できるのかを開発時に考えることさえできれば、適切なタグの選定はおのずと結果としてついてくるものであり、やみくもにセマンティックタグを追い求める必要はない。

まとめ

HTMLセマンティックタグを過度に追求することは本末転倒だ。

セマンティックタグとは、開発者がSEOやアクセシビリティを考慮した結果として、自然と導き出されるものだ。最初からこれらの要素を念頭に置いていれば、開発者は自然と適切なタグを選択し、対応するアクセシビリティ設計を組み込むことができるはずだ。

参考

Create semantic sites with json-ld
On web semantics: メリットについてのみ言及されており、SEOへの影響については触れられていない
SEO Starter Guide: セマンティックタグの <picture> が画像検索のSEOに役立つとだけ言及されており、それ以外には触れられていない
Multiple H1 Headings: サイト内で複数のh1を使用してもSEO自体には顕著な影響はなく、適切な場面でh1を使用すべきであると言及されている

カテゴリー

ページ

その他