HTML セマンティクス入門
セマンティック HTML（Semantic HTML / HTML 语义化）の核心は、ウェブページの内容に「意味（Meaning）」を持たせ、ブラウザや開発者にとって理解しやすくすることにあります。
単に「どう表示するか」（これは CSS の役割です）をブラウザに伝えるのではなく、そのコンテンツが「何であるか」を伝えます。これにより、アクセシビリティ（Accessibility）、SEO（検索エンジン最適化）、およびコードの保守性（Maintainability）が向上します。本質的には、「正しい場所に正しい HTML 要素を使用する」ということです。
1. セマンティック（意味論的）な意味の理解
セマンティック HTML は、内包するコンテンツの意味を記述するタグを使用します。これは、コンテンツ自体の意味を説明しない汎用的なコンテナである <div> や <span> といった非セマンティック要素とは対照的です。
1.1 セマンティック要素の例
一般的なセマンティック要素とその意味は以下の通りです：
<article>: フォーラムの投稿、雑誌や新聞の記事、ブログの投稿など、ドキュメント、ページ、アプリ内で独立して配信・再利用可能な構成要素を表します。<aside>: ドキュメントの一部であり、メインコンテンツと間接的にしか関連しないセクションを表します。通常、サイドバーや補足情報として表現されます。<details>: ユーザーが追加情報や操作を取得できる詳細コントロールを表します（通常は展開/折りたたみが可能です）。<figcaption>: 親要素である<figure>要素のキャプションまたは説明を表します。<figure>: 画像、図、コードブロックなどの自己完結したコンテンツを表し、通常はオプションのキャプションを伴い、全体として参照されます。<footer>: ドキュメントまたはセクションのフッターを表します。著者の情報、著作権データ、関連ドキュメントへのリンクなどが含まれます。<header>: 紹介的なコンテンツ、またはナビゲーション補助のセットを表します。タイトル、ロゴ、検索フォームなどを含みます。<main>: ドキュメントの<body>における主要なコンテンツを表します。そのページの中心的テーマに直接関連する内容で構成されます（通常、1ページに1つのみ配置します）。<nav>: 他のページやページ内セクションへのリンクを提供するナビゲーションセクションを表します。<section>: 一般的なテーマに基づいたコンテンツのグループ化を表し、通常は見出しを伴います。
1.2 非セマンティック要素の例
<div>: フローコンテンツの汎用コンテナ。意味的な価値はなく、主にブロックレベルのレイアウトに使用されます。<span>: フレーズコンテンツの汎用インラインコンテナ。意味的な価値はなく、主にテキストのスタイリングに使用されます。
2. なぜセマンティック HTML を使用するのか？
- アクセシビリティ (Accessibility): スクリーンリーダーなどの補助技術は、セマンティック HTML を頼りにページの構造を理解し、障害を持つユーザーに最適な体験を提供します。例えば、スクリーンリーダーは大量の
<div>群の中では迷ってしまいますが、<nav>や<main>へは直接ジャンプすることが可能です。 - SEO (検索エンジン最適化): 検索エンジンはセマンティック HTML を使用して、ページ内の情報の重みや文脈を正確に把握します。これにより検索ランキングの向上が期待できます。
- 保守性 (Maintainability): コードの可読性が高まります。
<div class="post">よりも<article>と書かれている方が直感的であり、更新作業やチーム開発が容易になります。 - 可読性 (Readability): セマンティック要素は各パーツの用途を明確に定義するため、ソースコードを見ただけでページの構成が手に取るようにわかります。
3. 実戦サンプル
セマンティック HTML をどのように活用するか、具体的なコード例を見てみましょう。
3.1 例 1：ブログ記事
すべてを <div> で組むのではなく、以下のようにセマンティックな要素で構築します。
<article>
<header>
<h1>素晴らしいブログ記事のタイトル</h1>
<p>公開日：<time datetime="2024-01-01">2024年1月1日</time> 著者：John Doe</p>
</header>
<section>
<h2>はじめに</h2>
<p>これはブログ記事の導入セクションです。</p>
</section>
<section>
<h2>メインコンテンツ</h2>
<p>これはブログ記事の核心となる内容です。</p>
</section>
<footer>
<p>コメントをお待ちしております！</p>
</footer>
</article>解説：
<article>: ブログ記事全体を一つの独立した単位として表します。<header>: タイトルと公開メタ情報。<section>: 記事を論理的なセクションに分割。<footer>: コメントなどの補足情報。<time>: マシンが読み取り可能な形式で日付を表します。
3.2 例 2：ウェブサイトのヘッダー
汎用的なボックスではなく、<header> 要素と <nav> 要素を組み合わせます。
<header>
<img src="logo.png" alt="サイトのロゴ">
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>解説：
<header>: サイトの最上部、ヘッダーエリア。<nav>: 主要なナビゲーションリンクの集まり。
3.3 例 3：サイドバー
メインコンテンツに関連するが、主要な内容とは切り離せるコンテンツには <aside> を使用します。
<aside>
<h3>関連記事</h3>
<ul>
<li><a href="#">記事 1</a></li>
<li><a href="#">記事 2</a></li>
<li><a href="#">記事 3</a></li>
</ul>
</aside>3.4 例 4：メインコンテンツエリア
各ページ固有の主要コンテンツを <main> 要素で包みます。
<body>
<header>...</header>
<main>
<article>...</article>
</main>
<footer>...</footer>
</body>4. 応用シナリオ：ECサイトの商品ページ
電子機器を販売する EC サイトの商品ページを想定したセマンティック構造です。
<article>
<header>
<h1>次世代スマートフォン X-Phone</h1>
<p>ブランド: <cite>PhoneCo</cite></p>
</header>
<section>
<h2>製品説明</h2>
<p>このスマートフォンは驚くべき最新機能を備えています...</p>
</section>
<aside>
<h3>カスタマーレビュー</h3>
<p>「最高です！」 - John</p>
<p>「非常に満足しています。」 - Jane</p>
</aside>
<footer>
<p>価格: $999</p>
</footer>
</article>解析：
<article>: 商品情報の独立した構成要素。<header>: 商品名とブランド。<section>: 詳細な説明。<aside>: レビュー（補足情報）。<footer>: 価格（サマリー情報）。
5. と を使用すべき場面
セマンティック要素の使用が最優先されますが、<div> や <span> にも当然役割があります。以下のような場合に使用します：
- コンテンツの正確な意味を表す適切なセマンティック要素が存在しない。
- 純粋にスタイリング（CSS）やスクリプト（JavaScript）の制御目的で汎用的なコンテナが必要な場合。
<div class="highlight-box">
このテキストはデザイン上の理由でハイライトされています。
</div>
<p>
文章の中にある <span class="keyword">特定のキーワード</span> にだけスタイルを当てます。
</p>これらの例では、<div> と <span> は CSS クラスを適用して見た目を調整するためだけに使用されており、コンテンツの意味を定義するものではありません。