article要素の使い方 — それだけでも内容が成り立つまとまり

HTMLのarticle要素は、ブログの記事や掲示板の投稿のように、ひとまとまりで読める内容を表します。ページのほかの部分から取り出しても、1つの内容として扱えるかが目安です。

先に結論

まずは小さな例

<main>
  <h1>お知らせ</h1>
  <article aria-labelledby="hours-title">
    <h2 id="hours-title">受付時間を変更します</h2>
    <p>来月から、受付時間が午前9時から午後5時までになります。</p>
    <p>公開日: <time datetime="2026-10-30">2026年10月30日</time></p>
  </article>
</main>

mainはこのページの中心となる内容をまとめ、articleはその中のお知らせを1件の内容として表します。見出しの番号は、ページ全体の見出しの順番に合わせて選びます。

article、section、divの違い

要素	使う場面
article	記事や投稿など、その部分を1つの内容として扱いたい
section	ページの中で、見出しを付けて話題をまとめたい
div	見た目やスクリプトのためにまとめたい。特別な意味は付けない

たとえば「今週のお知らせ」というsectionの中に、個別のお知らせを複数のarticleとして並べられます。どちらか一方だけを選ぶ必要はありません。

記事の中にコメントを置く

記事に付いたコメントも、それぞれ読める投稿なら、記事の中にarticleを入れて表せます。内側のarticleは、外側の記事に関係する内容になります。

<article aria-labelledby="post-title">
  <h2 id="post-title">週末の公園で見つけた鳥</h2>
  <p>池の近くで、白い鳥を見かけました。</p>

  <article aria-labelledby="comment-title">
    <h3 id="comment-title">コメント</h3>
    <p>私も先週、同じ場所で見ました。</p>
  </article>
</article>

よくある思い違い

• articleを書くだけで、新しいページや記事一覧が自動で作られるわけではありません。
• articleを置いても、見出しは自動で作られず、見出し番号も自動では変わりません。
• 見た目を囲みたいだけの場所に、必ずarticleを使う必要はありません。

読み上げソフトにはどう伝わる？

ブラウザーはarticleを記事のまとまりとして伝えます。ただし、ページ内の大事な場所へ移動するための「ランドマーク」とは別の役割です。記事の名前を付けたい場合は、見出しとaria-labelledbyで結び付けられます。

Atlasで詳しく確認する

仕様でいう独立した内容の範囲、sectioning contentとしての分類、記事の入れ子、アクセシビリティ上のrole、ブラウザーとWPTの確認範囲は、Yugien Atlasのarticle要素ページで確認できます。見出し付きの話題のまとまりとの違いは、section要素の説明もご覧ください。