[HTML] articleとsectionの使い方

どうも、べ〜やんです。

今回は、HTMLのarticleとsectionの使い方を紹介します。

articleとsection

div、article、sectionどれを使っても見た目上は同じ様に表示されます。

だったら全部divでいいじゃんと思う方もいると思いますが、クローラーにページの構造を理解してもらいSEO的にも使い分ける必要があります。

divは意味を持たない要素で、どの要素にも当てはまらない場合に最終の手段として使用することが推奨されています。

article

articleは独立したページを作れるような内容の場合に使用します。

例えば、ブログの記事などそれだけを切り離しても完結する内容のものです。

<article>
  <h2>ブログ記事など</h2>
  <p>独立した内容の場合はarticleを使用する</p>
</article>

section

sectionは段落を区切る場合に使用します。

例えば、ページの章・節・項などです。本をイメージしてみると分かりやすいです。

<h1>ページタイトル</h1>
<section>
  <h2>各章のタイトル</h2>
  <p>各章の内容</p>
</section>
<section>
  <h2>各章のタイトル</h2>
  <p>各章の内容</p>
</section>
<section>
  <h2>各章のタイトル</h2>
  <p>各章の内容</p>
</section>

記述ルール

基本的なルールにarticle、sectionには見出し(h1~h6)をつけるというルールがあります。なので見出しダグを使うときにはarticleやsectionが使えないか考えてみるのもいいと思います。

articleの中にarticle、articleの中にsection、sectionの中にsection、sectionの中にarticleなどのネストする使用もできます。

おわりに

今回は、HTMLのarticleとsectionの使い方を紹介しました。

クローラー目線でも優れたページを作る為に使い分けてみてください。