WEBサイトをHTML5でマークアップしていて、組み方で初めに迷ったのが、【article要素】と【section要素】の使い方だ。
今までは、divでマークアップを行っていたがHTML5からはマークアップする時に、新たに要素が増えたため、マークアップ量は増えるがHTMLの文章構造明確にするために、文章構造に適した要素を使う必要がある。
マークアップする際に一番使われるのは、セクションを明確にする要素で、その中にarticle、section、navなどがある。navなどはHTMLをマークアップするとき使い方はわかる。article、sectionは、調べてもイマイチ使い方が分からなかったがマークアップを行って行くうちに使い方が、分かったので簡単にまとめてみた。
トップページ
トップページなどのブログ以外のページでは、基本的にsectionでコンテンツを囲みます。では一体どこでarticleを利用するかというと、コンテンツが新着情報などでその部分のみで独立したページとして成り立つ場所で利用する。
例：トップページなどにある新着情報
<section>
<h3>新着情報</h3>
<article>
<header>
<time datetime="2013-04-26">2013年 4月26日</time>
<h4>タイトル</h4>
</header>
<p>テキストテキストテキスト</p>
</article>
<article>
<header>
<time datetime="2013-04-26">2013年 4月26日</time>
<h4>タイトル</h4>
</header>
<p>テキストテキストテキスト</p>
</article>
</section>
ブログ記事
トップページとは違い1つの記事でページが成り立っているブログ記事ならマークアップの仕方は変わってくる。
例：ブログ記事
<article>
<h3>タイトル</h3>
<p>本文</p>
</article>
簡単に書くとこんな感じになる。基本的なマークアップの仕方なのでほとんどの構成で使える。
