HTML article要素 完全ガイド（自己完結セクション / section との違い / SEO・アクセシビリティ）

「このブロックだけを 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、どちらでもないただのレイアウト用なら <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 を使うべきか判定フロー

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

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

よくある誤用

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

関連

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