HTML5以降、Webページの構造化はより意味的に設計できるようになりました。その中でも混乱しやすいのが、<article>・<section>・<main> の使い分け。
「どれも“何かのまとまり”っぽいけど、違いがよくわからない…」
この記事ではそれぞれの役割を明確にし、実務で迷わず使えるルールを解説します。
🔹 <main>：ページの主コンテンツを表す
<main>は、そのページの中心的なコンテンツを表す要素です。
- 通常、1ページに1つだけ使う
- ナビゲーションやフッターなどを除いた**“そのページならでは”の情報**を囲む
- スクリーンリーダーも「ここがメインだ」と認識して読み上げる
📌 例：
<body>
<header>...</header>
<nav>...</nav>
<main>
<h1>ブログ一覧</h1>
<article>...</article>
<article>...</article>
</main>
<footer>...</footer>
</body>
🔹 <article>：単体で意味を持つ“独立したコンテンツ”
<article>は、その中身だけで完結する情報のまとまりを表します。
- ニュース記事、ブログ投稿、掲示板の投稿など
- 他の文脈に持っていっても意味が成立する単位
<main>の中に複数配置されることが多い
📌 例：
<article>
<h2>新製品のお知らせ</h2>
<p>当社の新製品Aは、2025年8月に発売予定です。</p>
</article>
🔹 <section>：意味的にまとまった“トピックの区切り”
<section>は、意味のある節（セクション）を作るための要素です。
- タイトル（
<h2>など）がセットで使われるのが基本 - 文書の中で階層を構造的に分けたいときに使う
<main>の中や、<article>の中にも使える
📌 例：
<main>
<section>
<h2>サービス紹介</h2>
<p>私たちのサービスは〜</p>
</section>
<section>
<h2>料金プラン</h2>
<p>料金は〜</p>
</section>
</main>
🎯 使い分け早見表
| 要素 | 用途 | 特徴 |
|---|---|---|
<main> | ページのメインコンテンツ | 1ページ1つ、ナビなど除外 |
<article> | 単体で成立する記事・投稿 | 他サイトでも意味が通じる |
<section> | 文書内の意味的な区切り（章・話題） | 通常は見出し（<h*>）が必要 |
⚠️ よくある間違い
sectionの中にsectionを多重に使いすぎると、セマンティクスが過剰で逆にわかりにくくなります。divとの違い：sectionやarticleは**“意味”があるタグ**。単なるグループ分けなら<div>でOK。
✅ 実務的ルールまとめ
- ブログ一覧 →
<main>の中に<article>を並べる - ランディングページ →
<main>に<section>を使ってトピックごとに区切る - 会社概要ページ →
<main>に<section>を使い、各セクションに<h2>をつける
✍️ まとめ
HTMLの構造タグを正しく使うと、SEOにもアクセシビリティにも強いコードになります。
迷ったらこう考えましょう：
💬 「このまとまり、単体で意味ある？ →
article」
💬 「トピックの章立て？ →section」
💬 「そのページの中心部分？ →main」
意味を意識したコーディングが、未来の保守性と読みやすさにつながります。
