article要素

ブログなどの記事に使う

  • 独立した記事として成立する内容に使う
  • 自己完結した内容を示す
  • 具体的には独立して配布や再利用できるものにマークアップします
  • 雑誌や新聞の記事、ブログのエントリー、インタラクティブなウィジェットやガジェット、ユーザーが送信したコメント、その他コンテンツから独立したものです


《W3C仕様書》

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.

Author information associated with an article element (q.v. the address element) does not apply to nested article elements.


訳）article 要素は、ドキュメント、ページ、アプリケーション、あるいはサイトにおいて、独立した文章を表します。そして、たとえばシンジケート・フォーマット（註1のように、原則として独立した配布あるいは再利用が可能です。これは、フォーラムへの投稿、雑誌あるいは新聞記事、ブログ・エントリー、ユーザーによって送信されたコメント、インタラクティブなウィジェットあるいはガジェット、もしくはその他のコンテンツから独立した項目になり得るでしょう。

article 要素同士を入れ子にする場合、子要素は、原則として親要素の内容と関連のある記事を表します。たとえば、ユーザーのコメントを受け付けるブログ投稿では、その投稿自体のarticle 要素内に、article 要素を子要素として入れ、その子要素によってコメントを表すことができます。

article要素と結び付けられる作成者情報（address要素を参照）は、入れ子にされたarticle要素には適用されません。


《article要素を使ったマークアップ》

<section>
<h1>新着記事</h1>
<article>
  <h1>記事その１</h1>
  <p>記事の本文</p>
</article>
<article>
  <h1>記事その２</h1>
  <p>記事の本文</p>
</article>
</section>

《article要素を入れ子に使ったマークアップ》

<article>
<h1>記事その１</h1>
<p>記事の本文</p>
  <article>
    <h1>関連記事</h1>
    <p>記事の本文</p>
  </article>
</article>
  • 親のarticle要素の関連記事を意味します。
  • section要素のように「記事を見出しで区切る」ためにarticle要素を入れ子にしてはいけません
  • 同様の理由で、ページ全体をarticle要素で囲むことも間違った使用方です
セクショニング・ルート
  • 自分自身のアウトラインを持つことができる要素です
  • セクショニング・ルートを持つ要素 blockquote, body, details, fieldset, figure, tdです


セクション要素は常に直近の祖先のセクション、またはセクショニング・ルートのサブセクションになります。
例の article は body のサブセクションになり、h1「site title」は article の見出しとなるので、body の見出しが無いことになります。
そこで暗黙的にbodyの見出しが生成され「Untitled Section」というアウトラインになります。