<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:利用場所が微妙に変わりました。(フロー・コンテンツが置ける場所 → セクショニング・コンテンツが置ける場所)

使用例

ブログでの使用例

<article>

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

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

<section>

<h3>コメント</h3>

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

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

</section>

</article>

表示例

記事のタイトル

記事の内容 ...

...

コメント

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

投稿者:山田さん

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

投稿者:田中さん