article 要素記事セクションを表す

article 要素は文書内の独立した記事セクションを表します。例えば、ニュースサイトや Blog サイトにおける各記事や、それに付随するコメントなども独立した記事セクションと考えられます。

article 要素が入れ子になる場合、子孫となる article 要素は、先祖にあたる article 要素の内容に関連した記事を表すことになるでしょう。これは記事に対して投稿されたコメントなどを article 要素でマークアップする際などが該当すると思います。

なお、先祖となる article 要素に関連付けられた連絡先情報 (address 要素の解説をご覧ください) は、その子孫となる article 要素には適用されませんので、記事自体の連絡先情報とは別に、個々のコメントに対してそれぞれの投稿者の連絡先情報を関連づけるといったことも可能です。

サンプルソースを見る

article 要素の仕様

カテゴリ
コンテンツモデル
この要素を使用できる文脈

フロー・コンテンツが期待される場所

この要素で使用できる属性
DOM インタフェース
Uses HTMLElement.

article 要素のサンプルソース

<!-- Blog の記事などをマークアップした例 -->
<article>
 <header>
  <h1>ブログの記事</h1>
  <p><time datetime="2013-06-12T10:30:42+09:00">公開日: 2013年6月12日</time></p>
 </header>
 <p>本文</p>
 <p>...</p>
 <footer>
  <address>
   著者: <a href="mailto:japan@example.com">日本太郎</a>
  </address>
 </footer>
</article>
<!-- article 要素を入れ子にして、コメントをそれぞれマークアップした例 -->
<article>
 <header>
  <h1>ブログの記事</h1>
  <p><time datetime="2013-06-12T10:30:42+09:00">公開日: 2013年6月12日</time></p>
 </header>
 <p>本文</p>
 <p>...</p>
 <section>
  <h1>この記事へのコメント</h1>
  <article>
   <h1>二郎さんのコメント</h1>
   <p>とても参考になりました。</p>
   <footer>
    <address>投稿者: <a href="mailto:jiro@example.com">日本二郎</a></address>
   </footer>
  </article>
  <article>
   <h1>三郎さんのコメント</h1>
   <p>とても勉強になりました。</p>
   <footer>
    <address>投稿者: <a href="mailto:saburo@example.com">日本三郎</a></address>
   </footer>
  </article>
 </section>
 <footer>
  <address>
   著者: <a href="mailto:japan@example.com">日本太郎</a>
  </address>
 </footer>
</article>

W3C HTML5 仕様書

4.4.2 The article element