section要素とarticle要素の違い｜意味・使い分けを基礎から整理

HTMLには、文書構造を意味的に表現するための「セクショニング要素」が用意されています。
その中でも section要素 と article要素 は混同されやすく、正しく使い分けることが重要です。

本記事では、両者の役割や違いを基礎から整理し、どのような場面で使うべきかをわかりやすく解説します。

section要素とは

section要素の基本的な役割

section要素は、文書内のテーマごとのまとまり（セクション）を表す要素です。
見出しとセットで使われることが前提となり、ページ内の構造を整理する役割を担います。

<section>
  <h2>サービスの特徴</h2>
  <p>このサービスには次の特徴があります。</p>
</section>

section要素が適しているケース

section要素は、以下のような場面で使用されます。

• ページ内の章・節を区切りたい場合
• トピックごとに内容を整理したい場合
• 独立したコンテンツではないが、意味的な区切りが必要な場合

sectionは「意味のある区切り」を作るための要素であり、単体で完結する必要はありません。

article要素とは

article要素の基本的な役割

article要素は、それ単体で完結し、再利用可能なコンテンツを表す要素です。
RSS、SNS、一覧ページなどで切り出しても意味が通じる内容に使われます。

<article>
  <h2>HTMLの基本構造とは</h2>
  <p>HTML文書はhead要素とbody要素で構成されます。</p>
</article>

article要素が適しているケース

article要素は、次のような内容に適しています。

• ブログ記事
• ニュース記事
• 投稿一覧の各カード
• レビューやコラム

重要なポイントは、**「この部分だけを読んでも成立するかどうか」**です。

section要素とarticle要素の決定的な違い

意味の違いを一言で整理

独立性の有無が最大の判断基準

• article要素
  → 単体で意味が通じる（独立性が高い）
• section要素
  → 文書の一部として意味を持つ（独立性は不要）

この独立性の違いが、使い分けの最重要ポイントです。

よくある使い分けの例

ブログ記事ページの場合

<article>
  <h1>section要素とarticle要素の違い</h1>

  <section>
    <h2>section要素とは</h2>
    <p>section要素の説明です。</p>
  </section>

  <section>
    <h2>article要素とは</h2>
    <p>article要素の説明です。</p>
  </section>
</article>

• ページ全体：article
• 記事内の章：section

この構造が、Webメディアでは最も一般的です。

sectionとarticleは入れ子にできる

section要素とarticle要素は、状況に応じて入れ子構造にすることも可能です。

<section>
  <h2>最新記事</h2>

  <article>
    <h3>HTMLの基礎</h3>
    <p>HTMLの基本を解説します。</p>
  </article>
</section>

• 一覧全体：section
• 各記事：article

このように役割を分けることで、意味的に正しいHTML構造になります。

見出しタグとの関係にも注意

sectionやarticleは、見出しタグ（h1〜h6）と密接に関係しています。
見出しの階層が崩れると、構造が分かりにくくなります。

見出しタグの正しい使い方については、以下の記事で詳しく解説しています。
→ HTMLの見出しタグ（h1〜h6）の正しい使い方

よくある誤解と注意点

divとの違い

• div：意味を持たない汎用コンテナ
• section / article：意味を持つセマンティック要素

単なるスタイル目的であればdiv、構造や意味を表したい場合はsectionやarticleを使います。

sectionを使えば良いわけではない

見出しがない場合や、意味的な区切りが不要な場合にsectionを使うのは適切ではありません。
その場合はdivの方が自然です。

まとめ

• section要素は「文書内のテーマごとの区切り」
• article要素は「独立して成立するコンテンツ」
• 独立性があるかどうかが最大の判断基準
• 見出しタグとセットで考えることが重要

sectionとarticleを正しく使い分けることで、
読みやすく、構造が明確で、検索エンジンにも伝わりやすいHTMLになります。

HTMLの基礎構造について理解を深めたい場合は、
→ HTMLの基本構造とタグの役割 の記事もあわせて確認すると理解がより深まります。