HTML の <article> 要素は文書、ページ、アプリケーション、サイトなどの中で自己完結しており、 (集合したものの中で) 個別に配信や再利用を行うことを意図した構成物を表します。例えば、フォーラムの投稿、雑誌や新聞の記事、ブログの記事などが含まれます。

ある文書に複数の記事を含めることができます。たとえば、読者がスクロールするたびに各記事のテキストを次々と表示するブログでは、各記事は <article> 要素に含まれ、おそらくその中に1つ以上の <section> があります。

コンテンツカテゴリ フローコンテンツ, 区分コンテンツ, 知覚可能コンテンツ
許可されている内容 フローコンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 フローコンテンツを受け入れるすべての要素。なお、 <article> 要素を <address> 要素の子孫にしてはいけません。
許可されている ARIA ロール application, document, feed, main, presentation, region
DOM インターフェイス HTMLElement

属性

この要素にはグローバル属性のみがあります。

使用上の注意

  • それぞれの <article> は、子要素として見出し (<h1>-<h6> 要素) を含むなどの方法で識別できるようにするべきです。
  • <article> 要素を入れ子にした場合、内側の要素は外側の要素に関する記事を表します。例えばブログ投稿へのコメントは、ブログ投稿を表す <article> 内へ入れ子にした <article> 要素にできます。
  • <article> 要素の著者情報は <address> 要素で提供できますが、入れ子にされた <article> 要素には適用されません。
  • <article> 要素の発行日時は、 <time> 要素の datetime 属性で示すことができます。なお、 <time> 要素の pubdate 属性は W3C HTML 5 標準から外されました。

<article class="film_review">
  <header>
    <h2>Jurassic Park</h2>
  </header>
  <section class="main_review">
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <article class="user_review">
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-16 19:00">May 16</time>
          by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-17 19:00">May 17</time>
          by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on
      <time datetime="2015-05-15 19:00">May 15</time>
      by Staff.
    </p>
  </footer>
</article>

仕様書

仕様書 状態 備考
HTML Living Standard
<article> の定義
現行の標準  
HTML 5.1
<article> の定義
勧告  
HTML5
<article> の定義
勧告  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 5Edge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 11.1Safari 完全対応 4.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 11Safari iOS 完全対応 4.2Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, .Hiroya, ethertank, shirayuki
最終更新者: mfuji09,