HTML: HTMLセマンティクス
最終更新：2026-09-08
セマンティックタグはウェブページの構造に意味を与えます ― ブラウザに単なる表示方法だけでなく、「このセクションは何か」も伝えます。これはSEO、アクセシビリティ、コードの可読性を大きく向上させます。
1. セマンティクスとは
「セマンティクス」とは「意味」のことです。<div> でどんなレイアウトでも構築できますが、ブラウザはコンテナの目的を理解できません。セマンティックタグは、その名前を通じて直接的に目的を伝えます。
▶ サンプル
▶ 試してみよう📌 よく使われるタグ：
<header> ページヘッダー、<nav> ナビゲーション、<main> メインコンテンツ、<section> セクション、<article> 記事、<aside> サイドバー、<footer> フッター。これらはすべてブロックレベルのコンテナで、<div> のように機能しますが、その名前が目的を説明しています。
2. セマンティクスの利点
セマンティクスには3つの直接的な利点があります：検索エンジンがページ構造をより正確に理解できる。スクリーンリーダーが特定のエリアにジャンプできる。開発者がレイアウトを一目で理解でき、<div> のクラス名が何を意味するか推測する必要がありません。
3. 画像/コンテンツコンテナ：figure と figcaption
<figure> は画像、コードブロック、チャートなどの自己完結型コンテンツをラップし、<figcaption> はそれにキャプションを提供します。
▶ サンプル
▶ 試してみよう4. 時刻とハイライト：time と mark
<time> は日付と時刻を機械可読にし、<mark> は検索キーワードや重要なテキストをハイライトします。
▶ サンプル
▶ 試してみよう5. 折りたたみコンテンツ：details と summary
<details> は展開/折りたたみ可能なインタラクティブウィジェットを作成し、<summary> がその表示される見出しを定義します。純粋なHTMLだけで、JavaScriptは不要です。
▶ サンプル
▶ 試してみよう💡 その他のセマンティックタグ：
<blockquote> 引用、<code> コード、<address> 連絡先情報、<dialog> ダイアログ。すべてをセマンティックにできます ― 汎用タグを使う前に、最も適切なタグを見つけましょう。
❓ よくある質問
Q 意味論的タグはSEOにどのような影響を与えますか？
A 検索エンジンは意味論的タグを使用してページ構造とコンテンツの重要性を理解します。
<header>は検索エンジンに「これはページヘッダーです」と伝え、<main>は「これはコアコンテンツです」、<article>は「これは独立した記事です」を意味します。検索エンジンは<main>と<article>内のコンテンツにより高い重み付けをします。さらに、意味論的タグは検索エンジンがより正確なリザルトスニペット（記事タイトル、著者、公開日など）を生成するのに役立ちます。Q
<section>と<article>の違いは何ですか？A
<article>は独立した完全なコンテンツで、単独で公開または再利用できます（ブログ記事、ニュース記事、レビューなど）。<section>はコンテンツのテーマ別グループで、通常は見出しを持ちますが、独立したコンテンツではありません（章、タブパネル、製品機能など）。テスト：コンテンツブロックがそれ自体で意味を持つ場合は<article>を使い、コンテキストが必要な場合は<section>を使います。Q
<div>はいつ使うのですか？A 適切な意味論的タグがない場合にのみ
<div>を使用します。一般的なシナリオ：1）纯粹なスタイリングコンテナ（Flexboxレイアウトのために要素を囲む）；2）JavaScriptフック（モーダル、ポップアップ）；3）意味論的意味のないグループ化。ルール：まず意味論的タグ（header/nav/main/section/article/aside/footer）を探し、 noneが適合する場合は<div>にフォールバックします。Q
<details>と<summary>のブラウザ互換性はどうですか？A
<details>と<summary>はHTML5のネイティブ折りたたみパネルで、すべてのモダンブラウザ（Chrome、Firefox、Safari、Edge）でサポートされており、互換性は excellentです。利点：JavaScriptなしで折りたたみ可能、キーボードナビゲーションとスクリーンリーダーをサポート。制限：スタイルのカスタマイズが限定的（矢印アイコンなど）、複雑なインタラクションにはJavaScriptが必要。IEではサポートされていませんが、IEは廃止されているため、心配する必要はありません。📖 まとめ
- コアセマンティックタグ：
<header>、<nav>、<main>、<section>、<article>、<aside>、<footer> <figure>+<figcaption>は画像/コードをキャプション付きでラップ<time>は機械可読な日時をマーク。<mark>はテキストをハイライト<details>+<summary>は純粋HTMLの折りたたみパネルを作成- セマンティクスはSEO、アクセシビリティ、コードの可読性を向上
<div>と<span>にはセマンティクスがない。適切なタグがない場合にのみ使用する
📝 練習問題
- 骨格を作成する： セマンティックタグを使ってブログページの構造を作成し、プレースホルダーテキストを入力してください。
- 体験を比較する： スクリーンリーダーを使って、純粋な
<div>のページとセマンティックなページを両方ナビゲートし、その違いを観察してください。
