article要素

article要素はHTML5から新たに追加された要素です。

article要素でマークアップされたコンテンツはブログサイトの1つの記事など、それ自体で完結するセクションであることを示すことができます。

article要素の中にarticle要素が登場する場合、その内容は原則、祖先として存在するarticle要素の内容に関連していることが前提です。

例えば、次に示す使用例のようにarticleタグでマークアップされたブログ記事の子孫として登場するarticle要素は、ユーザーの投稿コメントが記述されています。このようなマークアップを行うことで、そのコメントが直近の祖先要素として存在するarticle要素（記事）に対してのコメントであることを示すことができます。

article要素は、少なくとも子要素に1つ以上のh1などのヘディングコンテンツを含むべきです。また、article要素の子孫として存在していないaddress要素から著者情報を影響されることはありません。そのarticle要素の著者情報を示すためには、article要素の子孫としてaddress要素を記述する必要があります。

article要素の子要素として存在するfooter要素内にtime要素とそのdatatime属性を用いることによって、article要素の発行日時を示すことができます。

使用例

<article class="entry">

<header>

<h2>記事タイトル</h2>

<p><time datetime="2016-10-20">16/10/20</time></p>

</header>



<p>記事本文</p>



<section class="comment">

<h2>コメント</h2>



<article class="message">

<header>

<h3>件名</h3>

<span>投稿者名</span>

<span><time datetime="2016-10-20">16/10/20</time></span>

</header>



<p>コメント本文</p>

<!-- /.message --></article>



<article class="message">

<header>

<h3>件名</h3>

<span>投稿者名</span>

<span><time datetime="2016-10-21">16/10/21</time></span>

</header>



<p>コメント本文</p>

<!-- /.message --></article>

<!-- /.comment --></section>

<!-- /.entry --></article>

使用可能な属性

• 全てのグローバル属性

コンテンツカテゴリ

• フローコンテンツ
  • ただしmain要素を子孫にもたない
• セクショニングコンテンツ
• パルパブルコンテンツ

子要素にしていい要素の種類

• フローコンテンツ

親要素にしていい要素の種類

• 子要素にフローコンテンツが期待されているすべての要素

仕様書と策定状況