divじゃだめなの？「article」と「section」の使い分けまとめ【解説付】

こんにちは。
サイバーブリッジweb担当の久保田です･:*+.\(( °ω° ))/.:+

今回はHTML5の基本中の基本でありながら、人によって使い方が違ってくるarticle要素とsection要素の使い分けについて解説していきますね。

なぜ使い分けるのか？

article要素もsection要素もブラウザで表示される際の違いはありません。

では、なぜわざわざ使い分けるのか？

それは、クローラーにページの構造を理解してもらうためです。

コンテンツの内容やデザインも大切ですが、クローラーが理解しやすい文書構造にすることでSEO対策にもなるのです。

article要素

article要素とは、ニュースやブログ記事、または記事に対するコメントなど、サイト内で自己完結していて、それ自体が独立したコンテンツとして成り立つものです。

文章だとイメージしずらいと思うので、例として実際にHTMLで作成していきます。

<h1>HTMLを教えるブログ</h1>
<article>
　<h2>article要素の使い方</h2>
　<p>article要素の使い方を教える記事だよ。</p>
　<h2>article要素の基本</h2>
　<p>article要素の基本を教える記事だよ。</p>
</article>

このような形で記述します。

また、article要素を入れ子にして使用することも可能です。
その場合の注意点として、子孫の<article>は親要素の<article>の内容に関連している必要があります。

<h1>HTMLを教えるブログ</h1>
<article>
　<h1>article要素の使い方</h1>
　<p>article要素の使い方を教える記事だよ。</p>
　<article>
　　<h2>記事に対してのコメント</h2>
　　<p>コメントのテキスト。</p>
　</article>
</article>

上記のような場合、article要素内に<h1>タグを使用することが可能です。

section要素

section要素とは、一般的なセクションを定義し、文章や節を示すものです。

<section>は、意味や機能を示すものなのでCSSによるスタイルの適応やJavaScriptでの操作のみを目的にするのは正しい使い方ではありません。
このような用途に使う時は<div>や<span>を使います。

<section>
　<h1>コンテンツの見出し</h1>
　<p>テキスト...</p>
</section>

section要素には内部にできるだけ<h1>〜<h6>の見出しタグを記述することが推奨されています。

まとめ

article要素とは、ニュースやブログ記事など、サイト内で自己完結していて、それ自体が独立したコンテンツとして成り立つもの。
<article>を入れ子にして使うことも可能ですが、その場合、子孫の<article>は親要素の<article>の内容に関連している必要があります。

section要素とは、一般的なセクションを定義し、文章や節を示すもの。
ページ内で<h1>、<h2>などの見出しが使われていても、<section>の中では改めて<h1>、<h2>を使うことができます。

article要素とsection要素の違いが分からず、
とりあえず<div>で囲っておけばいいや( ；∀；)
と思っていたものは、これを機にしっかりした使い分けで記述し直しましょう。