articleとsectionを使いこなして見る人にも検索エンジンにも優しい構造的なhtml制作

HTML5から追加された新たな要素の一つにarticleとsectionがあります。
これはhtmlの文章構造を明確化するために導入された要素ですが、html5導入当初は違いがわかりにくく、「イマイチ使い方がわからない」という声をよく耳にしました。 これらは文章構造のアウトラインを定義するタグで、これを整理してマークアップをすると人から見て読みやすいページになるだけでなく、検索エンジンからも理解しやすくなると言われています。
導入から時間も経ち、要素の解釈も明確になってきたので、ここでarticleとsectionそれぞれの役割や使い方について表してみようと思います。

section要素とは

sectionは囲んだ要素の機能や意味がひとまとまりになっている文章に利用されます。利用時のルールとしてこの要素で囲んだ中には、要素の意味を表す見出し（hタグ）をつけることが推奨されています。文章のアウトラインを定義するタグとなるので、hタグが自然に入らないような文章や、見た目の成形のために囲む要素としては利用を推奨されていません。

article要素とは

article要素はそれ単体で意味を成し完結している文章のまとまりに利用されます。たとえばブログの記事、ニュース記事の中のコラム部分など、文章量の大小に関わらず、囲まれた部分だけで一つのコンテンツとして成り立つような「文章のまとまり」にarticle要素は使用されます。
section要素が使える条件に当てはまり、かつ文章が単体で意味を成し完結しているまとまりの場合、article要素を使えると判断できます。

まとめ

section要素は見出しを持った文章のひとまとまり、article要素は意味の完結している文章のひとまとまり、として利用されています。
整理された文章構造で人にも検索エンジンにも見やすい記事やhtml制作を心がけてみましょう。