articleとsectionの違いとは？

Posted on 2026年2月27日2026年2月26日 by 小清水和真

「どっちを使えばいい？」問題を完全整理

セマンティックHTMLを書こうとすると、必ず迷うのがこの2つ。

<article>...</article>
<section>...</section>

どちらも「意味のあるブロック」を表しますが、
役割は明確に違います。

今回は、

<article> の本質
<section> の本質
決定的な違い
実務での判断基準
ネスト（入れ子）の考え方

まで、整理します。

まず結論

要素	役割
`<article>`	単体で完結する独立コンテンツ
`<section>`	文書内の意味的な区切り

一言で言うと：

<article> は「単体で外に出せる内容」
<section> は「文書の中の章」

`<article>` とは？

<article> は、

それ単体で意味が完結するコンテンツ

を表します。

例えば：

ブログ記事
ニュース記事
商品カード
SNS投稿
コメント
フォーラム投稿

例：

<article>
  <h2>HTMLの基本</h2>
  <p>この記事では...</p>
</article>

このブロックは：

RSSに流せる
単体ページにできる
切り出して再利用できる

という性質を持ちます。

`<section>` とは？

<section> は、

文書内の「テーマごとの区切り」

です。

例：

<section>
  <h2>サービス内容</h2>
  <p>当社では...</p>
</section>

これは「ページの一部」であって、
単体で完結するとは限りません。

決定的な違い

判断基準はこれ：

それは単体で配信・引用・再利用できるか？

YES → <article>
NO → <section>

具体例で比較

① ブログトップページ

<section>
  <h1>最新記事</h1>  <article>
    <h2>CSSの基本</h2>
  </article>  <article>
    <h2>HTMLの構造</h2>
  </article>
</section>

ここでは：

一覧エリア → <section>
各記事 → <article>

が正しい構造。

② 1つの記事ページ

<article>
  <h1>HTMLの基本</h1>  <section>
    <h2>見出しの使い方</h2>
  </section>  <section>
    <h2>セマンティクス</h2>
  </section>
</article>

ここでは：

記事全体 → <article>
記事内の章 → <section>

となります。

入れ子はOK？

はい、OKです。

パターン①

<section>
  <article>...</article>
</section>

（一覧ページ）

パターン②

<article>
  <section>...</section>
</article>

（記事ページ）

どちらも自然。

よくある間違い

❌ なんでも article

<article class="hero">...</article>

ヒーローエリアは独立コンテンツではないので、
通常は <section>。

❌ 見出しなし article

<article> には通常見出しが必要です。

❌ レイアウト目的で article

CSSのためだけに使うのはNG。
それは <div> の仕事。

SEO的な違い

検索エンジンは <article> を：

「独立コンテンツ」

として強く認識します。

ニュースサイトやブログで重要なのはここ。

一方 <section> は：

構造整理

の役割。

まとめ

比較	`<article>`	`<section>`
単体完結	✅	❌
再利用可能	✅	基本なし
見出し前提	✅	✅
主用途	記事・投稿	章・区切り

最後に

迷ったらこの質問：

それは単体でSNSやRSSに流せる？