コーディング

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

2016.03.23

2017.05.24

まっさらなノートの使い始め

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

section要素とは

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

article要素とは

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

まとめ

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

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。