定義と使い方

<article>タグは
ドキュメント、ページ、アプリケーション、またはサイトにおいて完全または独立した構成領域を示します。

このタグは独立して配布したり再利用が可能なコンテンツのアイテムとして構成する際に使用されます。
例えば、フォーラムの投稿、掲示板の記事、ニュース記事、ブログ記事、ユーザーコメント、SNS投稿などがあります。

基本例

HTML 
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>ブログ記事の例</title>
    </head>
    <body>
        <h1>ブログ記事の例</h1>
        
        <!-- 一つ目のブログ記事 -->
        <article>
            <h2>ウェブデザイントレンド2023</h2>
            <p>2023年のウェブデザイントレンドに関する予測と考察です。...</p>
            <time datetime="2024-10-15">2024年10月15日</time>
            <a href="/web-design-trends-2024">原文を表示</a>
        </article>

        <!-- 二つ目のブログ記事 -->
        <article>
            <h2>UXデザインの重要性</h2>
            <p>ユーザーエクスペリエンス（UX）デザインがなぜ重要であるのかについての議論です。...</p>
            <time datetime="2024-10-12">2024年10月12日</time>
            <a href="/ux-design-importance">原文を表示</a>
        </article>

        <!-- 三つ目のブログ記事 -->
        <article>
            <h2>モバイルアプリ開発のヒント</h2>
            <p>モバイルアプリを開発する際に役立つヒントやガイドラインを紹介します。...</p>
            <time datetime="2024-10-10">2024年10月10日</time>
            <a href="/mobile-app-development-tips">原文を表示</a>
        </article>
    </body>
</html>

この例では<article>タグがブログ記事の一覧を表しています。各<article>タグは一つの独立したコンテンツ領域として使用されており、それぞれのブログ記事は個別に扱うことができる内容となっています。

このように<article>タグを使用すると、各ブログ記事が独立したコンテンツとして理解され、ブログのメインページ、アーカイブページ、または関連トピックのページなどで当該ブログ記事を再表示する場合に、そのコンテンツを抽出したり再利用したりするために利用されます。

セマンティックな使用目的

多くの人が<article>タグをニュース記事やブログ記事といった文章領域に限定して理解している場合があります。
これは一般的な利用例の一つであるためです。しかし、<article>タグは単にニュース記事やブログ記事のような文章領域を示すためだけに使用されるものではなく、その用途はさらに幅広いものとなっています。

<article>タグの使用目的は「独立したコンテンツユニット」を示すことです。

このコンテンツユニットはそれ自体で意味を持ち、独立して配布したり再利用できる必要があります。したがって、ニュース記事やブログ記事だけでなく、論文、製品レビュー、フォーラム投稿、コメント、ウィジェット、独立した出来事やイベントの説明など、さまざまな形式のコンテンツを<article>タグで示すことができます。

ニュース記事やブログ記事は<article>タグの一般的な使用例の一つですが、これが<article>タグの限定的な用途というわけではありません。したがって、ウェブ開発者はウェブページの構造とセマンティクスを考慮し、どのコンテンツが独立して再利用可能であるかを判断した上で、適切に<article>タグを使用する必要があります。

<article>と<section>タグの違い

<article>と<section>タグの使用意図は混同されやすいです。
以下は、この二つのタグの違いをまとめて比較したものです。

  • <article>タグは独立して配布可能または再利用可能なコンテンツをまとめる領域として使用されます。
  • 一方、<section>タグは、ドキュメントやアプリケーションの論理的な観点からのテーマごとのコンテンツグループを示すために使用されます。
  • タグのコンテンツを外部と区別して単独でまとめる方が適している場合は、<section>タグよりも<section>タグの方がより良い選択となる場合があります。

補足説明
<section>タグは、ドキュメントやアプリケーションの一般的なセクションを示します。より適切な意味を持つ要素がない場合に、論理的な観点からテーマごとのコンテンツグループを表すために使用されます。

構文上の特徴

  • 独立して配布可能なコンテンツアイテム領域である<article>タグは、連絡先情報を示す<address>タグの子要素または孫要素になることはできません。
  • <article>タグが入れ子になっている場合、内側のタグは外側に関連するアイテムを示します。例えば、ユーザーがコメントを投稿できるサイトのブログ記事は、該当ブログ記事である<article>内に入れ子になった<article>でコメントを示すことができます。
  • <article>タグの作成者情報は<address>タグを用いて提供することができます。しかし、入れ子になった<article>の場合、内側の<article>には適用されません。内側の<article>に関する作成者情報を提供する場合は、<footer>タグがセマンティックな観点からより適切です。
  • <article>タグの暗黙的なrole属性の値はarticleです。

例

<article>タグは主に次のようなコンテンツをまとめるために使用できます。

  1. ニュース記事
  2. ブログ記事
  3. コメント
  4. 商品説明
  5. イベント情報
  6. その他の独立したコンテンツ

ニュース記事

HTML 
<article>
    <header>
        <h2>今日の天気</h2>
        <time datetime="2025-07-20">2025年7月20日</time>
    </header>
    <p>
        本日は全国的に曇りがちで、一部の地域では雨が降る見込みです。
    </p>
    <p>
        東京は午前中は曇りがちで、午後から雨が降る見込みです。
    </p>
    <p>
        大阪は午前中に雨が降り、午後からは曇りが多くなる見込みです。
    </p>
    <footer>
        <p>出典: 気象庁</p>
    </footer>
</article>

ブログ記事

HTML 
<article>
    <header>
        <h2>今日の日記</h2>
        <time datetime="2025-07-20">2025年7月20日</time>
    </header>
    <p>
        今日は天気が晴れて快晴だったので、散歩に出かけました。
    </p>
    <p>
        散歩をしながら、心が落ち着く感覚を味わいました。
    </p>
    <p>
        家に帰って美味しい夕食を食べ、映画を観ました。
    </p>
    <footer>
        <p>作成者: 山田太郎</p>
    </footer>
</article>

コメント

HTML 
<article class="comment">
    <p>
        コメント内容
    </p>
    <footer>
        <p>作成者: 山田太郎</p>
        <time datetime="2025-07-20">2025年7月20日</time>
    </footer>
</article>

商品説明

HTML 
<article>
    <header>
        <h2>商品名</h2>
    </header>
    <p>
        商品説明
    </p>
    <img src="商品画像のURL" alt="商品画像">
    <p>
        商品価格
    </p>
    <p>
        配送情報
    </p>
    <p>
        返品ポリシー
    </p>
</article>

イベント情報

HTML 
<article>
    <header>
        <h2>イベント名</h2>
        <time datetime="2025-07-20">2025年7月20日～7月30日</time>
    </header>
    <p>
        イベント内容
    </p>
    <img src="イベント画像のURL" alt="イベント画像">
    <p>
        イベント参加方法
    </p>
    <p>
        イベント賞品
    </p>
</article>

その他の独立したコンテンツ

HTML 
<article>
    <header>
        <h2>コンテンツタイトル</h2>
    </header>
    <p>
        コンテンツ内容
    </p>
    <img src="コンテンツ画像のURL" alt="コンテンツ画像">
    <p>
        コンテンツ作成者
    </p>
    <time datetime="2025-07-20">2025年7月20日</time>
</article>

提示した例は、<article>タグが主にどのような種類のコンテンツをまとめるために使用できるかを明確に示しています。<article>タグは、さまざまな独立したコンテンツタイプを表すために使用でき、それぞれのコンテンツは独立して理解され、再利用可能となるよう定義されています。

これ以外にも、論文、製品レビュー、フォーラム投稿、インタビューなどで使用することができます。

ネストされた<article>タグの使用

一つのドキュメントは複数の<article>タグを持つことができます。
<article>タグ内で再び<article>タグを使用することも可能で、次の例では日ごとの天気予報を表示するためにネストされた<article>タグが使用されています。ネストされた<article>タグは各日の天気予報情報を独立したコンテンツとして示し、親の<article>タグである「東京の天気予報」内で関連する内容としてまとめられています。

HTML 
<article>
    <h1>東京の天気予報</h1> 
    <article>
        <h2>2024年10月17日</h2>
        <p>晴れる見込みです。</p>
    </article>
    <article>
        <h2>2024年10月18日</h2>
        <p>時々曇るでしょう。</p>
    </article>
    <article>
        <h2>2024年10月19日</h2>
        <p>にわか雨の予報です。</p>
    </article>
</article>

技術的な文法のまとめ

articleタグの技術的な文法のまとめ
可能な親要素 <address>の子孫要素になることはできません。
暗黙的なrole属性の値 article
許可されているrole属性の値 application, document, feed, main, none, presentation, region

ブラウザ互換性

articleタグのブラウザ互換性
タグ
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
<article> 5 12 4 5

仕様書

articleタグの仕様書
仕様書
<article> HTML Standard
#the-article-element

参考資料

関連項目