📚

HTML5の<article>タグの正しい使い方：独立したコンテンツの判断基準

に公開
HTML
tech

はじめに

HTML5のセマンティック要素の中で、<article>タグは「独立して配信可能なコンテンツ」を表す重要な要素です。しかし、<section>や<div>との違いがわかりにくく、誤った使い方をされることが多いです。

この記事では、<article>タグの正しい使い方と、他のタグとの使い分けについて解説します。

1. <article>タグの役割：独立して配信可能なコンテンツ

<article>は、**「それ単体で独立して成立し、他の場所に配信・再利用しても意味が通じるコンテンツ」**を表します。

🔑 重要な判断基準：「単体で配信できるか？」

<article>を使うべきかどうかの判断基準は、以下の質問に答えられるかどうかです：

  • このコンテンツをRSSフィードに載せられますか？
  • このコンテンツを別のサイトに転載しても意味が通じますか？
  • このコンテンツはそれ自体が完結した情報ですか？

✅ <article>を使うべきコンテンツ

以下のようなコンテンツは<article>で囲むのが適切です：

  • ブログ記事
  • ニュース記事
  • フォーラムの投稿
  • コメント
  • 製品カード
  • ユーザーレビュー
  • SNSの投稿

✅ 良い例

<!-- ブログ記事 -->
<article class="blog-post">
  <h2>HTML5のセマンティック要素について</h2>
  <p class="meta">投稿日: 2025年10月20日</p>
  <p>本文がここに入ります...</p>
</article>

<!-- ニュース一覧の各項目 -->
<section class="news-list">
  <h2>最新ニュース</h2>

  <article class="news-item">
    <h3>新製品発表のお知らせ</h3>
    <time datetime="2025-10-20">2025年10月20日</time>
    <p>この度、新製品を発表いたします...</p>
  </article>

  <article class="news-item">
    <h3>採用情報更新</h3>
    <time datetime="2025-10-15">2025年10月15日</time>
    <p>新たなポジションの募集を開始しました...</p>
  </article>
</section>

<!-- ユーザーコメント -->
<article class="comment">
  <h4>山田太郎</h4>
  <p>とても参考になりました！</p>
  <time datetime="2025-10-20T14:30">2025年10月20日 14:30</time>
</article>

❌ 悪い例

<!-- サイトのナビゲーション（独立したコンテンツではない） -->
<article>
  <nav>
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/about">会社概要</a></li>
    </ul>
  </nav>
</article>

<!-- 単なるレイアウト用のラッパー -->
<article class="wrapper">
  <div>コンテンツ</div>
</article>

2. <article>、<section>、<div>の使い分け

3つのタグの使い分けは、独立性と意味的な役割で判断します。

タグ 役割 独立性 使用例
<article> 独立して配信可能なコンテンツ 高い（単体で意味が完結） ブログ記事、ニュース、コメント、製品カード
<section> テーマごとの意味的な区切り 中程度（ページ内で意味を持つ） サービス紹介、会社概要、お問い合わせ
<div> レイアウト・スタイル目的 なし（意味を持たない） ラッパー、グリッド、Flexboxコンテナ

判断フローチャート

このコンテンツは...

1. 単体で配信・転載できる完結した情報か？
   → YES: <article>を使う
   → NO: 次へ

2. ページ内で独立した意味的なテーマを持つか？
   → YES: <section>を使う
   → NO: 次へ

3. 単なるレイアウト・スタイル目的か？
   → YES: <div>を使う

3. <article>と<section>のネスト（入れ子）

<article>と<section>は、互いに入れ子にできます。

パターン1：<article>の中に<section>

長い記事を意味的なセクションに分割する場合：

<article class="blog-post">
  <h1>HTMLセマンティック要素の完全ガイド</h1>

  <section class="introduction">
    <h2>はじめに</h2>
    <p>この記事では...</p>
  </section>

  <section class="main-content">
    <h2>基本的な使い方</h2>
    <p>セマンティック要素は...</p>
  </section>

  <section class="conclusion">
    <h2>まとめ</h2>
    <p>以上のように...</p>
  </section>
</article>

パターン2：<section>の中に<article>

複数の独立したコンテンツをテーマごとにまとめる場合：

<section class="news-section">
  <h2>最新ニュース</h2>

  <article>
    <h3>製品アップデート</h3>
    <p>新機能を追加しました...</p>
  </article>

  <article>
    <h3>イベント開催のお知らせ</h3>
    <p>来月、セミナーを開催します...</p>
  </article>
</section>

4. <article>タグを使う際のベストプラクティス

1. 見出しを含める

<section>と同様、<article>にも見出し要素を含めるべきです。

<article>
  <h2>記事タイトル</h2>
  <p>本文...</p>
</article>

2. メタデータを含める

記事の日付や著者情報を<time>や<address>タグで明示します。

<article>
  <h2>セマンティックHTMLの重要性</h2>
  <p class="meta">
    <time datetime="2025-10-20">2025年10月20日</time>
    <address>著者: 山田太郎</address>
  </p>
  <p>本文...</p>
</article>

3. 構造化データとの組み合わせ

SEO向上のため、構造化データ（Schema.org）と組み合わせることも推奨されます。

<article itemscope itemtype="https://schema.org/BlogPosting">
  <h2 itemprop="headline">記事タイトル</h2>
  <time itemprop="datePublished" datetime="2025-10-20">2025年10月20日</time>
  <div itemprop="articleBody">
    <p>本文...</p>
  </div>
</article>

5. 実践例：ブログサイトの構造

典型的なブログサイトでの<article>の使用例：

<body>
  <header>
    <h1>Tech Blog</h1>
    <nav>
      <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <!-- メインの記事 -->
    <article class="main-article">
      <header>
        <h2>HTML5セマンティック要素の使い方</h2>
        <p class="meta">
          <time datetime="2025-10-20">2025年10月20日</time>
          <span class="author">山田太郎</span>
        </p>
      </header>

      <section class="introduction">
        <h3>はじめに</h3>
        <p>セマンティック要素は...</p>
      </section>

      <section class="content">
        <h3>詳細</h3>
        <p>具体的には...</p>
      </section>

      <footer>
        <p>タグ: HTML, セマンティック</p>
      </footer>
    </article>

    <!-- コメントセクション -->
    <section class="comments">
      <h3>コメント</h3>

      <article class="comment">
        <h4>佐藤花子</h4>
        <p>とても参考になりました！</p>
        <time datetime="2025-10-20T14:30">2025年10月20日 14:30</time>
      </article>

      <article class="comment">
        <h4>鈴木一郎</h4>
        <p>実装してみます。</p>
        <time datetime="2025-10-20T15:00">2025年10月20日 15:00</time>
      </article>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 Tech Blog</p>
  </footer>
</body>

まとめ

<article>タグは、独立して配信可能なコンテンツを表すために使用します。「このコンテンツをRSSフィードに載せられるか？」という質問が、使用判断の良い指標になります。

ポイント

  • <article>は単体で意味が完結するコンテンツに使う
  • ブログ記事、ニュース、コメント、製品カードなどが典型的な使用例
  • <section>と<article>は互いに入れ子にできる
  • 見出しとメタデータ（日付、著者）を含めるのがベストプラクティス
  • 単なるレイアウト目的なら<div>を使う

<section>と<article>を適切に使い分けることで、SEOやアクセシビリティに優れた、より意味的に正確なHTML構造を実現できます。

Discussion