article 要素記事セクションを表す

article 要素は文書内の独立した記事セクションを表します。例えば、ニュースサイトや Blog サイトにおける各記事や、それに付随するコメントなども独立した記事セクションと考えられます。

article 要素が入れ子になる場合、子孫となる article 要素は、先祖にあたる article 要素の内容に関連した記事を表すことになるでしょう。これは記事に対して投稿されたコメントなどを article 要素でマークアップする際などが該当すると思います。

なお、先祖となる article 要素に関連付けられた連絡先情報 (address 要素の解説をご覧ください) は、その子孫となる article 要素には適用されませんので、記事自体の連絡先情報とは別に、個々のコメントに対してそれぞれの投稿者の連絡先情報を関連づけるといったことも可能です。

article 要素の仕様

カテゴリ
コンテンツモデル
この要素を使用できる文脈

フロー・コンテンツが期待される場所

この要素で使用できる属性

article 要素のサンプルソース

<!-- Blog の記事などをマークアップした例 -->
<article>
 <header>
  <h1>ブログの記事</h1>
  <p><time datetime="2013-06-12T10:30:42+09:00">公開日: 2013年6月12日</time></p>
 </header>
 <p>本文</p>
 <p>...</p>
 <footer>
  <address>
   著者: <a href="mailto:japan@example.com">日本太郎</a>
  </address>
 </footer>
</article>
<!-- article 要素を入れ子にして、コメントをそれぞれマークアップした例 -->
<article>
 <header>
  <h1>ブログの記事</h1>
  <p><time datetime="2013-06-12T10:30:42+09:00">公開日: 2013年6月12日</time></p>
 </header>
 <p>本文</p>
 <p>...</p>
 <section>
  <h1>この記事へのコメント</h1>
  <article>
   <h1>二郎さんのコメント</h1>
   <p>とても参考になりました。</p>
   <footer>
    <address>投稿者: <a href="mailto:jiro@example.com">日本二郎</a></address>
   </footer>
  </article>
  <article>
   <h1>三郎さんのコメント</h1>
   <p>とても勉強になりました。</p>
   <footer>
    <address>投稿者: <a href="mailto:saburo@example.com">日本三郎</a></address>
   </footer>
  </article>
 </section>
 <footer>
  <address>
   著者: <a href="mailto:japan@example.com">日本太郎</a>
  </address>
 </footer>
</article>

主要ブラウザの対応

IE11
Edge(EdgeHTML)
Edge(Chromium)
Chrome
Firefox
Safari
iOS Safari
Android Chrome

仕様書の該当箇所

4.3.2 The article element

用途から目的の要素を探す

用途から HTML5 の要素を逆引きできます。

テキストに対する意味づけを行いたい
テキストの編集を示したい
改行や折り返しを指定したい
上付きや下付きを指定したい
テキストの書字方向を制御したい
テキストにルビをふりたい
箇条書きなどリストを表したい
セクションを定義したい
コンテンツをグループ化したい
画像や映像などを埋め込みたい
スクリプトやスタイルを埋め込みたい
フォーム関連の要素
テーブル関連の要素
ドキュメントにメタデータを付与したい
インタラクティブな要素
その他

このページの上部へ