HTML: HTMLセマンティクス

Q: 意味論的タグはSEOにどのような影響を与えますか？

検索エンジンは意味論的タグを使用してページ構造とコンテンツの重要性を理解します。 <header> は検索エンジンに「これはページヘッダーです」と伝え、 <main> は「これはコアコンテンツです」、 <article> は「これは独立した記事です」を意味します。検索エンジンは <main> と <article> 内のコンテンツにより高い重み付けをします。さらに、意味論的タグは検索エンジンがより正確なリザルトスニペット（記事タイトル、著者、公開日など）を生成するのに役立ちます。

Q: <section> と <article> の違いは何ですか？

<article> は独立した完全なコンテンツで、単独で公開または再利用できます（ブログ記事、ニュース記事、レビューなど）。 <section> はコンテンツのテーマ別グループで、通常は見出しを持ちますが、独立したコンテンツではありません（章、タブパネル、製品機能など）。テスト：コンテンツブロックがそれ自体で意味を持つ場合は <article> を使い、コンテキストが必要な場合は <section> を使います。

Q: <div> はいつ使うのですか？

適切な意味論的タグがない場合にのみ <div> を使用します。一般的なシナリオ：1）纯粹なスタイリングコンテナ（Flexboxレイアウトのために要素を囲む）；2）JavaScriptフック（モーダル、ポップアップ）；3）意味論的意味のないグループ化。ルール：まず意味論的タグ（header/nav/main/section/article/aside/footer）を探し、 noneが適合する場合は <div> にフォールバックします。

Q: <details> と <summary> のブラウザ互換性はどうですか？

<details> と <summary> はHTML5のネイティブ折りたたみパネルで、すべてのモダンブラウザ（Chrome、Firefox、Safari、Edge）でサポートされており、互換性は excellentです。利点：JavaScriptなしで折りたたみ可能、キーボードナビゲーションとスクリーンリーダーをサポート。制限：スタイルのカスタマイズが限定的（矢印アイコンなど）、複雑なインタラクションにはJavaScriptが必要。IEではサポートされていませんが、IEは廃止されているため、心配する必要はありません。

セマンティックタグはウェブページの構造に意味を与えます ― ブラウザに単なる表示方法だけでなく、「このセクションは何か」も伝えます。これはSEO、アクセシビリティ、コードの可読性を大きく向上させます。

1. セマンティクスとは

「セマンティクス」とは「意味」のことです。<div> でどんなレイアウトでも構築できますが、ブラウザはコンテナの目的を理解できません。セマンティックタグは、その名前を通じて直接的に目的を伝えます。

▶ サンプル

HTML

<header>
<h1>私のブログ</h1>
<nav>
<a href="index.html">ホーム</a>
</nav>
</header>
<main>
<article>
<h2>記事タイトル</h2>
<p>記事の内容...</p>
</article>
<aside>サイドバー</aside>
</main>
<footer>
<p>&copy; 2026</p>
</footer>

▶ 試してみよう

📌 よく使われるタグ：<header> ページヘッダー、<nav> ナビゲーション、<main> メインコンテンツ、<section> セクション、<article> 記事、<aside> サイドバー、<footer> フッター。これらはすべてブロックレベルのコンテナで、<div> のように機能しますが、その名前が目的を説明しています。

2. セマンティクスの利点

セマンティクスには3つの直接的な利点があります：検索エンジンがページ構造をより正確に理解できる。スクリーンリーダーが特定のエリアにジャンプできる。開発者がレイアウトを一目で理解でき、<div> のクラス名が何を意味するか推測する必要がありません。

3. 画像/コンテンツコンテナ：figure と figcaption

<figure> は画像、コードブロック、チャートなどの自己完結型コンテンツをラップし、<figcaption> はそれにキャプションを提供します。

▶ サンプル

HTML

<figure>
<img src="/assets/images/tutorials/html-sales-chart.webp" alt="2026年売上データグラフ">
<figcaption>図1：2026年の四半期別売上比較</figcaption>
</figure>

<figure>
<pre><code>console.log("Hello World");</code></pre>
<figcaption>コード例：Hello Worldの表示</figcaption>
</figure>

▶ 試してみよう

4. 時刻とハイライト：time と mark

<time> は日付と時刻を機械可読にし、<mark> は検索キーワードや重要なテキストをハイライトします。

▶ サンプル

HTML

<p>公開日：<time datetime="2026-06-12">2026年6月12日</time></p>

<p>検索結果：<mark>セマンティックタグ</mark>
がハイライト表示されます。</p>

<p><time datetime="2026-06-12T14:30:00+08:00">
明日の午後2時30分</time> からミーティングが開催されます。</p>

▶ 試してみよう

5. 折りたたみコンテンツ：details と summary

<details> は展開/折りたたみ可能なインタラクティブウィジェットを作成し、<summary> がその表示される見出しを定義します。純粋なHTMLだけで、JavaScriptは不要です。

▶ サンプル

HTML

<details>
<summary>セマンティックタグとは？</summary>
<p>セマンティックタグとは、意味のある名前を使ってコンテンツの目的を説明するHTMLタグです。例えば &lt;header&gt;、&lt;nav&gt;、&lt;article&gt; などがあります。</p>
</details>

<details open>
<summary>すでに展開されているパネル（open属性あり）</summary>
<p>open属性を追加すると、パネルがデフォルトで展開された状態になります。</p>
</details>

▶ 試してみよう

💡 その他のセマンティックタグ：<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> のページとセマンティックなページを両方ナビゲートし、その違いを観察してください。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

私たちについて