質問やフィードバックがありましたら、フォームからお願いします
本文は台湾華語で、ChatGPT で翻訳している記事なので、不確かな部分や間違いがあるかもしれません。ご了承ください
前言
フロントエンドエンジニアとして、すべてのHTMLタグを完全に暗記する必要はありませんが、よく使われるHTMLタグやその使用シーンについては一定の理解が必要です。例えば、<section>、<main>、<article>、h1~h6、<aside>、<footer>、<a>、<button>など、異なるシーンに応じて使い分けることが求められます。
しかし、意味的なタグを使用する目的は何でしょうか？多くの記事では、意味的なタグについての議論が浅く、どのタグをどこで使用すべきかに留まることが多く、結果としてウェブページのタグは多様に見えても、ユーザー体験は必ずしも向上しません。
こうした状況は、フロントエンド開発者に誤解を与え、「意味的なタグを使わないことは非常に悪いことだ」と思わせる可能性があります。さらには、無意識のうちに<div>や<span>を避けることにもつながります。そこで、私の見解をいくつか共有したいと思います。
一部の歴史的背景
初期のHTMLには、<b>、<font>、<center>などの多くの非意味的なタグがありました。これらのタグは特に意味を持たず、単にスタイルを装飾するためのものでした。後にCSSが登場し、スタイルの扱いはタグで表現する必要がなくなりました。これが「意味的なタグ」という言葉が最初に登場した背景です。HTML5では、これらの純装飾用タグは削除されています。
意味的なタグの目的
私にとって、意味的なタグの主な目的は次の三つです：
- アクセシビリティ（Accessibility）：適切なHTMLタグを使用することで、リーダーがコンテンツをよりよく読み取れるようにすること。
- 検索エンジンがページ構造を理解できるようにし、SEOを向上させること。
したがって、この記事全体もこの二つのポイントに焦点を当てて論じます。
HTMLタグが不足している
ウェブページを構築する際、経験豊富な開発者はページの性質に応じてmain、nav、aside、footerなどに分け、ページの主要な構造を描きます。フォームを作成する際も、経験豊富な開発者はlabelや対応するinputを追加し、ブラウザのネイティブ機能を最大限に活用します。
この区分け自体には問題はありませんが、この表現方法は往々にして最も重要なことを見落とします。ウェブページ上のインタラクションは非常に多様で、多くのUIコンポーネントは既存のHTMLタグだけでは簡単に表現できません。
フロントエンドエンジニアは上記の大原則に従ってレイアウトを構築できますが、UIコンポーネントがHTMLタグにカバーされていない場合、どのタグが良いかという迷信に陥りがちです。例えば、tooltip、carousel、notification bar、チャットなどのUIコンポーネントは、どのタグで表現すべきでしょうか？
これは開発上よく遭遇する問題ですが、多くの記事では触れられていません。
アクセシビリティの視点からのアプローチ
意味的なタグは目的ではなく手段です。私にとって、意味的なタグの最も重要な目的はアクセシビリティを達成することです。ネイティブのHTMLタグを使用することで、自分で実装する手間や不一致を減らし、最小のコストで最良の効果を得ることができます。
アクセシビリティの観点から見ると、問題の解決策は非常に明確になります。
もしアクセシビリティが適切に実装されていれば、全ての要素が<div>でできたウェブサイトでも良好な体験を提供できる（理論的には可能ですが、考慮すべきことが多いため、基本的にはそうはしません）。
アクセシビリティを探求せず、意味的なタグを無条件に強調するのは、単に政治的正しさを追求しているだけだと思います。
例えば、先ほどのnotification barについて考えてみましょう。この状況において、私はどのHTMLタグを使用すべきでしょうか？意味的なタグを使用する際には、こうした曖昧な状況がしばしば発生するか、あるいはこのUIを表現するための適切なタグが存在しないこともあります。
しかし、アクセシビリティの観点から出発すれば、全ての問題は次のような重要なポイントに集約されます：
- スクリーンリーダーはnotification barの変化を認識できるか？
- ユーザーはマウス以外の操作でnotification barを閉じることができるか？（または他の方法で）
これらはすべてユーザー体験に影響を与える要素です。
この状況では、何のタグを使うかを考えるよりも、より良いユーザー体験を提供することに集中することが重要です。見た目が「高級」なHTMLタグを使用したからといって、自動的に実装が完了するわけではありません。
これは、HTMLの意味的なタグが重要でないということではありません。<main>、<section>、<article>、<header>、<footer>などのタグは、検索エンジンがページ構造を認識するのに大いに役立ちます。
構造化データの導入（ld-json）
ld-jsonは、ウェブページに対応する<script>タグを追加し、その中でJSONを使用してページの構造を定義することで、検索エンジンがウェブコンテンツをより容易に解析できるようにする方法です。
ウェブコンテンツの解析が容易になるだけでなく、評価、ニュース、FAQなどのページは、Googleや他の検索エンジンが特化した結果ページを直接生成できるため、ユーザーが必要な情報をより簡単に見つけることができます。
意味的なタグとSEO
クローラーはh1、h2、h3などの構造を参照し、<main>のようなタグを使ってコンテンツを解析しようとします。したがって、ある程度は開発者がHTMLタグを理解する必要があります。
ただし、HTMLの意味的なタグを使用することがSEOの主な目的となる場合、フロントエンドエンジニアは、よりSEOに影響を与える他の要因に注目すべきです：
<head>内にtitle、description、sitemapなどのSEOに役立つmetaが適切に追加されているか。- TwitterやFacebook向けのプレビュー用に適切なopen graph metaが追加されているか。
- SSRが実装されているか。
- ページにld-jsonを適用できるか。
上述した要素は、SEOに対してより顕著な影響を持ちます。
HTMLタグの構造はSEOを最終的に完成させるための最後のピースです。もし検索エンジンがh1を重視しているなら、今後はみんなが全てh1を使ってウェブサイトを作るようになるでしょう。
未来
今後、より多くのHTMLタグが追加され、ブラウザがサポートできるネイティブUIも増えていくことが予想されます。この記事で言及したUIコンポーネント、例えばタブや通知などは、将来的にはそれぞれに対応するタグが利用できるようになるかもしれません。しかし、大原則は変わりません。開発時にユーザーがUIとどのようにインタラクションするか、ブラウザがどのような機能を提供できるかを考慮すれば、正しいタグを使用することは自然な結果となります。そして、それはただ単に意味的なタグを追求することではありません。
結論
HTMLの意味的なタグを過度に追求することは本末転倒です。
意味的なタグは、開発者がSEOとアクセシビリティを考慮した結果として自然に導き出されるものです。最初からこれらの要素を考慮に入れていれば、開発者は適切なタグを選択し、それに応じたアクセシビリティ設計を自然に取り入れることができるでしょう。
参考
- Create semantic sites with json-ld
- On web semantics：その利点についてのみ言及し、SEOへの影響には触れていません。
- SEO Starter Guide：意味的なタグ
<picture>が画像検索に役立つことに触れていますが、他には言及されていません。 - Multiple H1 Headings：サイト内で複数のh1を使用してもSEOに大きな影響はないこと、適切なタイミングでh1を使用すべきことを述べています。
この記事が役に立ったと思ったら、下のリンクからコーヒーを奢ってくれると嬉しいです ☕ 私の普通の一日が輝かしいものになります ✨
☕Buy me a coffee