article要素 - web-0127のブログ

ブログなどの記事に使う

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

《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要素を入れ子にしてはいけません

セクショニング・ルート

自分自身のアウトラインを持つことができる要素です
セクショニング・ルートを持つ要素 blockquote, body, details, fieldset, figure, tdです

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

もちろん上記の書籍は、初心者の最初のステップには申し分の内容だと思います。
しかし、AppleがそうであるようにHTML5の新要素の使い方には注意が必要です。
超初心者は、それを記述することから始めない方がよいかもしれません。

他にも、ページ全体を「article」で囲んでいる例は枚挙にいとまがないほどです。
そもそもアウトラインを明示的に使うのでなければ、HTML5の新要素をあえて記述する必要はないと思います。