article 要素記事セクションを表す
article 要素は文書内の独立した記事セクションを表します。例えば、ニュースサイトや Blog サイトにおける各記事や、それに付随するコメントなども独立した記事セクションと考えられます。
article 要素が入れ子になる場合、子孫となる article 要素は、先祖にあたる article 要素の内容に関連した記事を表すことになるでしょう。これは記事に対して投稿されたコメントなどを article 要素でマークアップする際などが該当すると思います。
なお、先祖となる article 要素に関連付けられた連絡先情報 （address 要素の解説をご覧ください） は、その子孫となる article 要素には適用されませんので、記事自体の連絡先情報とは別に、個々のコメントに対してそれぞれの投稿者の連絡先情報を関連づけるといったことも可能です。
article 要素の仕様
- カテゴリ
- コンテンツモデル
- この要素を使用できる文脈
セクショニングコンテンツが期待される場所
- この要素で使用できる属性
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>
主要ブラウザの対応
| IE11 | ○ |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |