<article>
（記事コンテンツの単位）

概要

  • 独立して成り立つコンテンツのまとまり（ブログ記事、ニュース記事、レビュー、フォーラムの投稿など）を表します。
  • 単体で再配布・転載しても意味が通るものに使います。

最小サンプル

<article>
  <header>
    <h1>記事タイトル</h1>
    <p>2025-08-15 / 著者: 山田</p>
  </header>

  <p>ここに本文が入ります。独立した記事として意味が通る内容にしましょう。</p>

  <footer>
    <p>タグ: <a href="#">HTML</a>, <a href="#">セマンティクス</a></p>
  </footer>
</article>

実務での使い方（ポイント）

  • “独立性”が鍵：ページ内の単なる区切りは<section>、記事単位は<article>。
  • ページ内に<article>が複数あってOK（一覧ページなど）。
  • 見出しは<h1>〜<h6>の意味階層で。見た目のサイズはCSSで調整。
  • SNSカードや検索向けに、<article>直下や<head>で**title/meta/OGP**も整えると◎。

CSSの基本（必要な場合のみ）

article {
  padding: clamp(16px, 3vw, 32px);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}
article > header h1 { margin: 0 0 .5em; }
article > footer { margin-top: 1.5em; font-size: .9em; color: #6b7280; }

アクセシビリティ

  • articleは支援技術で「ランドマーク」として認識され、ナビゲーションしやすくなります。
  • 必ずわかりやすい見出し（通常はh1/h2）を含める。
  • 入れ子にする場合は、各<article>に固有の見出しを。

よくある落とし穴

  • ただのレイアウト目的で乱用しない（区切りなら<div>または<section>(意味で区切るセクション)）。
  • articleなのに見出しが無い → 構造が把握しづらくなる。
  • 一覧ページで、カード全体を<article>にせず<div>にしてしまい、意味が失われる。

コメント