セマンティック（意味論的な）タグは、コンテンツの意味をブラウザや検索エンジンに正確に伝えるために使用します。これにより、Webサイトのアクセシビリティ（A11Y）とSEOが大幅に向上します。
| カテゴリ | タグ | 役割と用途 | 代替タグ（非推奨） |
|---|---|---|---|
| 全体構造 | <main> | ドキュメントの主要かつユニークなコンテンツを囲みます。ページごとに一つだけ使用し、ナビゲーションやフッターは含めません。 | <div> |
<header> | セクションまたはドキュメントの導入部を定義します。サイト名、ロゴ、ナビゲーション、キャッチコピーなどを格納します。 | <div> | |
<footer> | セクションまたはドキュメントの末尾を定義します。著作権情報、連絡先、関連リンクなどを格納します。 | <div> | |
<nav> | 主要な**ナビゲーションリンク（目次、グローバルメニューなど）**の集合体を定義します。 | <div> | |
<article> | 自己完結したコンテンツを定義します。ブログ記事、ニュース記事、フォーラムの投稿など、独立して配信・再利用できるものです。 | <div> | |
<section> | 一般的なコンテンツの区切りを定義します。<h2>〜<h6>で見出しを付けるべき意味的なグループ化に使用します。 | <div> | |
<aside> | 主要コンテンツとは間接的に関連するコンテンツを定義します。サイドバー、広告、補足情報など。 | <div> | |
| グループ化 | <hgroup> | 複数の見出し（<h1>〜<h6>）やスローガンを論理的にグループ化します。主にSEOとアウトラインの調整に使用されます。 | <div> |
<address> | 最も近い<article>または<body>の連絡先情報（著者、管理者など）を定義します。 | <p> | |
<figure> | 自己完結したメディアコンテンツ（画像、図表、ビデオなど）を定義します。 | <div> | |
<figcaption> | <figure>要素のキャプションや説明文を定義します。 | <p> | |
| テキスト | <mark> | 特定の文脈で関連性が高い、またはハイライトすべきテキストを定義します（検索結果のキーワードハイライトなど）。 | <span> + CSS |
<time> | 機械可読な日付または時刻を定義します。SEOやカレンダー機能との連携に役立ちます。 | <span> | |
<cite> | 作品のタイトル（書籍、映画、論文など）を定義します。引用元を示す<blockquote>タグ内のフッターと混同しないように注意が必要です。 | <i> |
よくある間違いと正しい使い分け
| シーン | 間違いやすい例 (非推奨) | 正しいセマンティックな例 (推奨) |
|---|---|---|
| サイトの最上部 | <div id="header"> | <header> |
| ブログ記事 | <div class="post"> | <article> |
| サイドバー | <div class="sidebar"> | <aside> |
| 著作権情報 | <p class="copyright"> | <footer> |
| メインナビ | <div class="menu"><ul>...</ul></div> | <nav><ul>...</ul></nav> |
ポイント:
<section>と<div>の使い分け:<section>は必ず見出し（<h2>など）を持つべき意味的なコンテンツのグループであるのに対し、<div>は単なるレイアウトのためのコンテナとして使用されます。- セマンティクス ≠ スタイル: セマンティックタグは見た目ではなく、意味を定義します。スタイル（色やサイズ）は必ずCSSで制御しましょう。