<article></article>
更新日 | |
---|---|
仕様 | HTML Living Standard |
分類 | フロー・コンテンツ / セクショニング・コンテンツ / パルパブル・コンテンツ |
利用場所 | セクショニング・コンテンツが置ける場所 |
内容 | フロー・コンテンツ |
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>
<h2>記事のタイトル</h2>
<p>記事の内容 ...</p>
<footer>
<address>山田 太郎<br>info@example.com</address>
</footer>
</article>
- 旧HTMLからの変更点
-
- HTML5:article要素が定義されました。
- HTML LS:利用場所が微妙に変わりました。(フロー・コンテンツが置ける場所 → セクショニング・コンテンツが置ける場所)