Web制作において「セマンティックHTML」という言葉を聞く機会が増えています。
セマンティック（semantic）とは「意味的」「意味を持つ」という意味で、セマンティックHTMLとは“タグ本来の意味に沿った構造でマークアップすること” を指します。
検索エンジン（Google）やスクリーンリーダーなどに、Webページの構造を正しく伝えることができ、SEO・GEO・アクセシビリティの両面で非常に重要です。
目次
1.セマンティックHTMLを使うメリット
1-1. SEOに有利
Google は「意味のある構造」を理解しやすくなるため、ページ内容を正しく評価しやすくなります。
h1〜h6、nav、article などの構造が適切に使われていると、クローラーが内容をより正確に把握できます。
1-2. アクセシビリティが改善
視覚に障害のあるユーザー向けのスクリーンリーダーなどがページの構造を理解しやすくなり、ユーザーに優しいサイトになります。
1-3. コードの可読性が向上
意味を持つタグを使うことで、開発者が見ても構造が分かりやすく、保守性が高まります。
2.意味を持つ（セマンティックな）HTMLタグ一覧
以下は、“何の役割なのかを明確に示すタグ” です。
2-1.ページ構造系
- header：ヘッダー領域
- nav：ナビゲーション
- main：ページの主要コンテンツ
- footer：フッター領域
- section：内容の区分
- article：独立した記事・コンテンツ
- aside：補足情報（サイドバー等）
2-2.文章構造系
- h1〜h6：見出し
- p：段落
- ul / ol / li：リスト
- figure / figcaption：画像とその説明
- blockquote：引用文
- address：連絡先情報
2-3.強調系
- strong：強い意味での強調（重要性を示す）
- em：感情的な強調（イントネーション）
3.意味を持たない（非セマンティック）HTMLタグ一覧
以下は、意味を持たず、見た目の調整や汎用コンテナで使うタグ です。
- div：汎用ブロック要素
- span：汎用インライン要素
- b：太字（意味はない）
- i：斜体（意味はない）
これらのタグ自体には役割がありません。
そのため、構造を表現する用途ではなく、デザインやスクリプト処理用として使用されます。
4.セマンティックHTMLを使うべき場面
- ページ全体の構造を作るとき
- コンテンツに意味づけしたいとき
- ブログ記事・ニュース記事をマークアップするとき
- ナビゲーションやサイドバーなど役割が明確なとき
逆に、装飾目的やライブラリの構造など、意味付けが難しい部分は div / span を使うのが一般的です。
まとめ
セマンティックHTMLとは、ページの構造やコンテンツの役割を明確に示すタグを正しく使うこと です。
意味を持つタグを活用することで、SEO・アクセシビリティ・保守性すべてが向上します。
とはいえ、すべてをセマンティックタグに置き換える必要はなく、状況に応じて div や span も併用します。
適切なバランスで「意味のあるHTML」を意識することで、より良いWebサイト構築が可能になります。