<article> の使い方と解説

POINT !

<article> 要素のポイント！

<article> は「それ単体で意味が完結する」コンテンツのブロックに使用する。ブログ記事、ニュース記事、フォーラムの投稿、製品カードなど、別のコンテキストに持ち出しても意味が通じるものが対象。
スクリーンリーダーやクローラーは <article> を「独立したコンテンツ単位」として認識するため、ページ内に複数配置しても各々が固有の意味を持つと解釈される。
<article> の中に <article> をネストすることができる。たとえば記事本文と、その記事へのコメント群という関係が典型例。内側の <article> は外側のコンテンツに関連する独立したまとまりを表す。
<section> との違いを意識することが重要。<section> はページの「章・節」を表すのに対し、<article> は「RSS フィードなどで単体配信できるコンテンツ」という意味合いが強い。判断に迷ったら <div> より <article> を選ぶと良い。

概要

<article> 要素は HTML5 で導入されたセマンティック要素のひとつで、ページやサイトの文脈から切り離しても「それ単体で意味が成立する」コンテンツの塊を表します。W3C の仕様では「独立して配信・再利用が可能なコンテンツ」と定義されており、RSSフィードやソーシャルメディアへの共有など、単体で取り出して別の場所に置いても情報として完結することが判断の基準です。

HTML5 以前は <div id="article"> や <div class="post"> のようにクラス名で意味を付与するしかありませんでしたが、<article> によって意味そのものをマークアップに込めることができるようになりました。これにより検索エンジンはページ構造をより正確に把握でき、スクリーンリーダーはコンテンツの種類をユーザーに伝えることができます。

よくある誤解として「記事（article）だから文章コンテンツ専用」と思われることがありますが、EC サイトの商品カード、ユーザーレビュー、ツイートのような短い投稿も <article> の適切な用途です。「このコンテンツを RSS で配信したとして、それだけで意味が通じるか？」という問いかけが判断の良い指針になります。

具体的な役割

ブログ記事・ニュース記事の本文、ECサイトの商品カード、コメント欄の各コメント、SNS 投稿のカード UI など「独立して意味が成立するコンテンツ単位」に用いる。一覧ページでは各カードを <article> でマークアップし、詳細ページでは本文全体を <article> で包むのが典型的なパターン。

ネスト（入れ子）のルール

📦 <article> はフローコンテンツを内包できます。通常は見出し（<h2>〜<h6>）、本文（<p>）、画像（<figure>/<img>）、フッター情報（<footer>）などで構成します。<article> の中に <section> を入れて記事を章立てすることも有効です。逆に <section> の中に <article> を複数ネストするパターン（例：<section> がブログ一覧ページ全体、<article> が各投稿）も正しい使い方です。<article> 内の <header> には記事タイトルや投稿日、著者情報を、<footer> には関連リンクやカテゴリータグを配置するのが意味的に自然です。

技術の変遷：昔の常識 vs 今の常識

TRADITION (昔)

HTML5 以前は <div id="main-article"> や <div class="post-content"> のように div 要素にクラス・ID を振ることで記事領域を表現していた。クローラーやスクリーンリーダーはクラス名からコンテンツの意味を推測することはできず、構造理解はほぼ不可能だった。

MODERN (今)

HTML5 以降は <article> 要素を使うことで、マークアップ自体がコンテンツの独立性を宣言する。CSS セレクタも article { } とシンプルに書けるうえ、検索エンジン・スクリーンリーダー・RSS パーサーがコンテンツ構造を正確に把握できる。クラス名はあくまでスタイリング用途に特化できる。

主要な属性

属性名	説明
`HTMLカテゴリ`	フローコンテンツ、セクショニングコンテンツ、パルパブルコンテンツ
`親要素の制限`	フローコンテンツを受け入れる任意の要素
`ARIAロール`	article
`グローバル属性`	すべてのグローバル属性（class, id, lang, style など）が使用可能
`ネスト`	<article> の中に <article> を配置可能（コメントなど関連コンテンツを表す場合）
`HTML5 導入`	HTML5（2014年 W3C 勧告）で追加されたセマンティック要素
`RSS との親和性`	単体で RSS アイテムとして配信可能なコンテンツの判断基準として使われる

利用例

ブログ記事カードの基本構造

記事一覧ページで使うカード型 UI。<article> が各投稿の独立した単位を表し、<header>・<footer> で投稿メタ情報を整理している。

CSS Style

.post-card { border: 1px solid #e0e0e0; border-radius: 8px; padding: 24px; max-width: 480px; font-family: sans-serif; } .post-card__category { background: #1a56db; color: #fff; font-size: 12px; padding: 2px 10px; border-radius: 20px; } .post-card__title { font-size: 20px; margin: 12px 0 4px; } .post-card__title a { color: #111; text-decoration: none; } .post-card__date { font-size: 13px; color: #888; } .post-card__excerpt { margin: 12px 0; line-height: 1.7; color: #444; font-size: 15px; } .post-card__footer { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; } .post-card__author { font-size: 13px; color: #666; } .post-card__link { color: #1a56db; font-size: 14px; text-decoration: none; font-weight: bold; }

HTML Structure

<article class="post-card">
  <header class="post-card__header">
    <span class="post-card__category">デザイン</span>
    <h2 class="post-card__title">
      <a href="/posts/flexbox-guide">Flexbox 完全ガイド 2024</a>
    </h2>
    <time class="post-card__date" datetime="2024-11-01">2024年11月1日</time>
  </header>
  <p class="post-card__excerpt">
    Flexbox の基本概念から実践的なレイアウトパターンまで、
    現場で即使えるテクニックを網羅して解説します。
  </p>
  <footer class="post-card__footer">
    <span class="post-card__author">by きゃすぱ</span>
    <a href="/posts/flexbox-guide" class="post-card__link">続きを読む →</a>
  </footer>
</article>

<article> のネスト：記事とコメント

外側の <article> が記事本文、内側の <article> が各コメントを表す。コメントも「独立して意味が成立するコンテンツ」であるためネストが適切。

CSS Style

.blog-post { font-family: sans-serif; max-width: 560px; padding: 24px; border: 1px solid #ddd; border-radius: 8px; } .blog-post h1 { font-size: 22px; margin-bottom: 8px; } .blog-post p { color: #444; line-height: 1.7; } .comments { margin-top: 24px; } .comments h2 { font-size: 16px; color: #555; border-bottom: 1px solid #eee; padding-bottom: 8px; margin-bottom: 16px; } .comment { background: #f8f9fa; border-left: 3px solid #1a56db; padding: 12px 16px; margin-bottom: 12px; border-radius: 0 6px 6px 0; } .comment header { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; } .comment time { font-size: 12px; color: #888; } .comment p { margin: 0; font-size: 14px; color: #333; }

HTML Structure

<article class="blog-post">
  <h1>CSS Grid でできること</h1>
  <p>CSS Grid は二次元レイアウトを直感的に実現できる強力な仕組みです…</p>

  <section class="comments">
    <h2>コメント (2件)</h2>

    <article class="comment">
      <header>
        <strong>田中さん</strong>
        <time datetime="2024-11-02">2024年11月2日</time>
      </header>
      <p>Grid と Flexbox の使い分けが明確になりました！ありがとうございます。</p>
    </article>

    <article class="comment">
      <header>
        <strong>鈴木さん</strong>
        <time datetime="2024-11-03">2024年11月3日</time>
      </header>
      <p>subgrid についても解説していただけると嬉しいです。</p>
    </article>
  </section>
</article>

よくある誤用・注意点

<article> は「独立して意味が成立する」コンテンツに限定すべきで、ページ全体のレイアウト区画や、単なるスタイリング目的のラッパーに使うのは誤り。また、本来 <section> で表すべき「ページの一章節」に <article> を使うと、コンテンツが実際より独立性が高いかのような誤った意味を持たせてしまう。

CSS

body { font-family: sans-serif; font-size: 14px; } .bad { background: #fff3f3; border: 1px solid #fca5a5; padding: 12px; border-radius: 6px; margin-bottom: 12px; color: #991b1b; } .good { background: #f0fdf4; border: 1px solid #86efac; padding: 12px; border-radius: 6px; color: #166534; } p { margin: 0 0 4px; font-weight: bold; }

HTML (Incorrect)

<!-- ❌ 悪い例：ページ全体のレイアウトラッパーとして使っている -->
<article class="page-wrapper">
  <article class="sidebar">サイドバー</article>
  <article class="main-content">
    <article class="about-section">会社概要</article>
    <article class="service-section">サービス紹介</article>
  </article>
</article>

<!-- ✅ 良い例：役割に応じた適切な要素を使う -->
<div class="page-wrapper">
  <aside>サイドバー</aside>
  <main>
    <section class="about-section">会社概要</section>
    <section class="service-section">サービス紹介</section>
  </main>
</div>

リファレンス統計

HTML 要素 14

CSS プロパティ 6

レイアウト・構造

ナビゲーション・リンク

<nav>

メディア・画像

インタラクティブ

メタデータ・スクリプト

<article> 要素