HTML5 では、Webページの構造をより明確にするために
article と section という2つのセマンティック（意味を持つ）タグが導入されました。
どちらも“まとまり”を作るタグですが、
目的・使い方・意味 が異なります。
この記事では、初心者が最も混乱しやすい
article と section の違い・使い分けの基準・実例コード をわかりやすく解説します。
セマンティックタグとは？
HTML5で追加された「意味を持つタグ」のことです。
例：
<header><main><article><section><nav><footer>など
これらを使うことで、
✔ コードの意味が正しく伝わる
✔ 検索エンジン（SEO）に内容が理解されやすい
✔ 読み上げソフトにも優しい（アクセシビリティ）
というメリットがあります。
その中でも特に悩みやすいのが article と section。
article の役割
「独立して成り立つコンテンツ」を表すタグ です。
例：
- ブログ記事
- ニュース記事
- レビュー
- 商品紹介
- 掲示板の投稿
- コメント
- 一つのまとまった情報単位
基本例
<article>
<h2>HTML講座：記事タイトル</h2>
<p>本文が入ります…</p>
</article>
article の特徴
- 単体で意味が通るコンテンツ
- 別のページに引用しても成り立つ
- 構造としては「1つ＝1記事」のイメージ
- ブログやメディアでは最も使うセクション
→ WordPressテーマでも article は記事を囲むタグとして使われます。
section の役割
「内容をテーマごとに区分するためのまとまり」 を表すタグ。
例：
- パート1 / パート2
- 見出しごとの区切り
- カテゴリーのまとまり
- ステップ1〜3 のまとまり
- トピックごとの分割
基本例
<section>
<h2>HTMLの基本構造</h2>
<p>説明が入ります…</p>
</section>
section の特徴
- 意味のある“章”や“パート”のまとまり
- 見出し（h2〜h6）を含めるのが基本
- 1ページに何個あってもOK
- article の中にも section を入れられる
article と section の違いまとめ
| タグ | 内容 | 例 | 特徴 |
|---|---|---|---|
| article | 独立した情報の単位 | ブログ記事、レビュー、ニュース | 単体で意味が完結する |
| section | 内容を分類するまとまり | 見出しごとのパート | 見出しを必ず含むのが基本 |
✔ article：そのまま1つで記事になる
✔ section：記事内の章・パート分け
具体的な使い分け例
ブログ記事ページの場合
<article>
<h1>HTML講座：基本構造を解説</h1>
<section>
<h2>1. DOCTYPEとは？</h2>
<p>説明…</p>
</section>
<section>
<h2>2. headタグの役割</h2>
<p>説明…</p>
</section>
</article>
✔ 記事全体 → article
✔ 記事内のh2パート → section
ニュースサイトの場合
<article>
<h2>新製品が発売されました</h2>
<p>本文…</p>
<section>
<h3>製品の特徴</h3>
<p>説明…</p>
</section>
<section>
<h3>発売日と価格</h3>
<p>説明…</p>
</section>
</article>
ブログでのよくある使い方（WordPress）
WordPressのテーマではほとんどの場合、
- 記事全体＝
<article> - 見出し単位＝
<section>（またはdiv）
という構造になっています。
よくある間違い
section をただのレイアウト目的に使う
→ デザイン目的は div でOK。
→ section は意味のまとまり。
section の中に見出しがない
→ section の基本ルールは「見出しとセット」。
article の中に article を入れてしまう
→ 基本は入れない（※ コメント・投稿など特殊な場合を除く）
まとめ
- article = 独立したコンテンツ
- section = 章ごとのまとまり（見出し必須）
- ブログの記事全体は article
- 記事内のパートは section
- デザイン目的は div を使う
正しく使えば、検索エンジンがページ構造を理解しやすくなり、
HTMLの品質も向上します。
著者からのひと言
article と section は初心者が最も悩みやすいタグですが、一度“意味”を理解できれば使い分けはとてもシンプルです。
HTMLは意味を考えて書くほど綺麗なコードになっていくので、ぜひ意識してみてください！
次回の記事は「nav・asideでページ構造を整理する方法」です。
