<article></article>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / セクショニング・コンテンツ / パルパブル・コンテンツ
利用場所 フロー・コンテンツが置ける場所
内容 フロー・コンテンツ(ただし、main要素は含められない)

article要素は、自己完結したセクションを表します。その範囲のみでも、1つのコンテンツとして成立するようなセクションで使用します。

この要素の内容には、見出しが含まれているのが自然です。(しかし、必須ではありません)


<article>

自己完結したセクションを表します

</article>

article要素を使用することで、それが1つの独立した記事であることを表すことができます。例えば、次のようなコンテンツで使用することができます。

  • ニュースの記事
  • ブログの記事
  • 掲示板の投稿
<div id="content">

<article>
<h2>記事その1</h2>
...
</article>

<article>
<h2>記事その2</h2>
...
</article>

</div>

また、article要素を入れ子にすることで、次のようなコンテンツを表すこともできます。

  • 親記事の中の子記事
  • 記事に対するユーザーからのコメント
  • 子article要素の内容は、親article要素の内容に関連している必要があります。
<article>

<h2>記事その1</h2>
<p>記事の内容 ...</p>
...

<section>

<h3>コメント</h3>

<article>
<p>コメントその1</p>
</article>

<article>
<p>コメントその2</p>
</article>

</section>

</article>

上記の他、ウィジェット(ガジェット)の領域なども、この要素で表すことが可能です。

address要素の使用について

article要素内でaddress要素を使用すると、その記事に関する連絡先を示すことができます。

  • 連絡先の情報は、直近祖先のarticle要素にのみ適用されることになります。(それよりも上位のarticle要素には適用されません)
<article>

<h2>記事のタイトル</h2>
<p>記事の内容 ...</p>

<footer>
<address>山田 太郎<br>info@example.com</address>
</footer>

</article>

使用例

ブログでの使用例

<article>

<header>
<h2>記事のタイトル</h2>
<p><time datetime="2011-11-17T18:26:47">2011/11/17 18:26</time></p>
</header>

<p>記事の内容 ...</p>
...

<section>

<h3>コメント</h3>

<article>
<p>ユーザーからのコメントの内容 ...</p>
<footer>
<p>投稿者:山田さん</p>
<p><time datetime="2011-11-18T12:35:50">2011/11/18 12:35</time></p>
</footer>
</article>

<article>
<p>ユーザーからのコメントの内容 ...</p>
<footer>
<p>投稿者:田中さん</p>
<p><time datetime="2011-11-20T01:10:45">2011/11/20 01:10</time></p>
</footer>
</article>

</section>

</article>

表示例

記事のタイトル

記事の内容 ...

...

コメント

ユーザーからのコメントの内容 ...

投稿者:山田さん

ユーザーからのコメントの内容 ...

投稿者:田中さん