読者です 読者をやめる 読者になる 読者になる

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

article要素

ブログなどの記事に使う

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


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

<section>
<h1>新着記事</h1>
<article>
  <h1>記事その1</h1>
  <p>記事の本文</p>
</article>
<article>
  <h1>記事その2</h1>
  <p>記事の本文</p>
</article>
</section>

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

<article>
<h1>記事その1</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の新要素をあえて記述する必要はないと思います。

広告を非表示にする