この記事の要点

<article> は自己完結した独立コンテンツを表す HTML5 セクショニング要素 ブログ記事、ニュース、フォーラム投稿、コメント、商品カードなど単独で配布・再利用可能なら article <section> は文書内の意味的なまとまり。article は section より独立性が強い 入れ子可能 — 記事本体の article の中にコメントの article を入れる構造は正しい 検索エンジン・スクリーンリーダーが記事単位を識別しやすくなり、SEO とアクセシビリティに有利

article 要素とは

<article> は HTML5 で導入されたセクショニング要素の 1 つで、「単独で配布・再利用できる自己完結したコンテンツ」を表します。具体的にはブログ記事、ニュース記事、フォーラムの投稿、ユーザーコメント、ウィジェット、商品カードなどが該当します。

「このブロックだけを RSS 配信したり、別ページに切り出しても意味が通る」と感じるなら <article> でくくれる、と考えると判断しやすいです。

基本構文

<article>
  <header>
    <h2>記事タイトル</h2>
    <p>投稿日: <time datetime="2026-06-11">2026年6月11日</time></p>
  </header>

  <p>記事本文...</p>

  <footer>
    <p>著者: 山田太郎</p>
  </footer>
</article>

article と section の違い

項目	<article>	<section>
意味	独立・自己完結したコンテンツ	テーマでまとめた文書の一部
切り出して使える？	○（RSS / 別ページ）	△（前後の文脈が必要）
典型例	記事、コメント、商品カード	記事内の章、タブパネル
見出し	原則必要	原則必要

判断に迷ったら「単独で意味が通るか？」を基準に。意味が通るなら article、文書内の部分なら section、どちらでもないただのレイアウト用なら <div> を選びます。

記事 + コメントの構造例

<article> は入れ子にできます。ブログ記事の本体を <article> でくくり、その中に各コメントを別の <article> で表現するのが典型パターンです。

<article id="post-123">
  <h1>記事タイトル</h1>
  <p>記事本文...</p>

  <section>
    <h2>コメント</h2>

    <article class="comment">
      <header>
        <h3>山田さんのコメント</h3>
        <time datetime="2026-06-11T10:00">10:00</time>
      </header>
      <p>とても参考になりました。</p>
    </article>

    <article class="comment">
      <header>
        <h3>佐藤さんのコメント</h3>
        <time datetime="2026-06-11T11:00">11:00</time>
      </header>
      <p>続編期待しています。</p>
    </article>
  </section>
</article>

商品カードでの利用

EC サイトの商品一覧でも、各カードが独立して意味を持つなら <article> を使えます。

<section class="products">
  <h2>新着商品</h2>

  <article class="product">
    <h3>ワイヤレスイヤホン</h3>
    <img src="/img/earphone.jpg" alt="ワイヤレスイヤホン">
    <p>価格: 9,800円</p>
    <p>軽量で長時間バッテリー対応。</p>
    <a href="/products/123">詳細を見る</a>
  </article>

  <article class="product">
    <h3>スマートウォッチ</h3>
    ...
  </article>
</section>

記事メタデータ（推奨）

SEO 効果を最大化するため、<article> 内には見出しと日時を含めるのが推奨です。<time> 要素の datetime 属性は機械可読な ISO 8601 形式で記述します。

<article>
  <header>
    <h1>React 19 の新機能まとめ</h1>
    <p>
      著者: <span itemprop="author">山田太郎</span>
      投稿日: <time datetime="2026-06-11">2026年6月11日</time>
      更新日: <time datetime="2026-06-15">2026年6月15日</time>
    </p>
  </header>
  <p>本文...</p>
</article>

article を使うべきか判定フロー

質問	YES	NO
独立して意味が通る？	article 候補	section / div
RSS で配信できそう？	article	section
テーマでまとめた文書の一部？	section	article / div
レイアウトのためだけ？	div	article / section

SEO とアクセシビリティの効果

• 検索エンジン: 記事の範囲を明確に認識でき、リッチリザルト（Article 構造化データ）と組み合わせやすい
• スクリーンリーダー: 「記事」というランドマークとして認識され、ユーザーが記事間をジャンプしやすい
• Reader Mode: Safari/Firefox のリーダー表示でも本文として抽出されやすい

よくある誤用

• サイドバーやナビ全体を article で囲む — これは <aside> や <nav>
• 見出しなしの article — 1 つも見出しがないと意味が弱くなる
• すべてのブロックを article に — 単なる装飾用ボックスは <div> で十分

関連

• section 要素 — テーマでまとめた文書の一部
• aside 要素 — サイドバー / 補足情報
• nav 要素 — ナビゲーション
• header / footer — 記事のヘッダ / フッタ
• time 要素 — 機械可読な日時表現