divタグを多用してる人をよく見かけるけど、パンちゃんはどうじゃ？

え、divタグって多用したらいけないんですか？

タグにはそれぞれ役割があるので、それを知った上で使うのはいいんじゃが、とりあえず何でもかんでもdivで囲んじゃえ！というのは良くないんじゃ。

<div>タグばかり使用してませんか？

マークアップの際に<div>ばかり使用していないでしょうか？
<div>ではなく<article>や<section>を使用して、クローラーに親切な文書構造を目指しましょう。

なぜ全てdivで囲んではいけないのか

articleとsectionとdiv、それぞれどのタグを使用しても表示に変化はありません。
では、どうしてdivではなくarticleやsectionを使用した方がよいのでしょうか？

この3つのタグにはそれぞれ違った役割があります。

articleとsectionはタグ自体に明確な意味がありますが、divにはありません。

つまり、適切なタグを使用せずdivばかりを使用したページは、クローラーが理解できない構造のページとなるのです。

divは、他に適切なタグがない際の最終手段として使用することを推奨されているタグです。

sectionとは

テーマを持った1つのまとまりを表します。
例えば、サイトのトップページであれば下記のようにマークアップできるでしょう。

sectionの中身はABOUTやCONCEPTなどの、意味のある1グループであることがわかります。

sectionには見出しを含むことが推奨されていますが、そもそも見出しが存在しないコンテンツはテーマ性が低いと言えるので、“見出しがない場合sectionの使用は適切ではない”という解釈ができます。

articleとは

ページから切り離されても単独で成り立つコンテンツを表します。
サイト内の通常コンテンツだけでなく、投稿記事や投稿コメントなども囲うことができます。

最後に

articleとsectionはよくわからないからとりあえずdiv、なんて人は少なくないはずです。
タグの役割をしっかり理解し、適切なマークアップを心がけていきましょう。

なるほど！
articleやsectionは、HTML5から追加された要素ですよね。
構造化をきちんとすべきということですね！

そうじゃ！
HTML5になってから数年経つので、構造化タグをきちんと理解して、適切なマークアップを心掛けるのじゃ。