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>

使用可能な属性

  • 全てのグローバル属性

コンテンツカテゴリ

  • フローコンテンツ
  • セクショニングコンテンツ
  • パルパブルコンテンツ

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

  • フローコンテンツ

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

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

仕様書と策定状況

仕様書 策定状況
W3C 勧告
WHATWG Living Standard
最終更新:2016年9月2日

ミツエーリンクスでは、デジタルメディアにおける企業と顧客とのコミュニケーション課題を解決する、さまざまなサービスをご提供しています。ぜひ一度サービスページをご覧ください。

関連情報