【プログラミング初学者必見】article、section、divタグの使い方 徹底解説

article、section、divタグの違いと使い分けの方法について、調べたので記事にします。

なぜ使い分ける必要があるのか?

まず、article、section、divのどのタグも、「一つの塊であるコンテンツブロックを形成する」という意味では、同じ働きをします。

つまり、どのタグを使ったとしても、ブラウザ上でのプレビューに違いはありません。

それでも使い分ける目的は何でしょうか?

それは、クローラーに文書構造を正しく理解してもらい、SEOを優位にするためです。
つまり、クローラーに対し、「このブロックは一つの独立した記事ですよ」とか「これはレイアウトやデザインのための塊で、意味はないですよ」とか教えてあげれば良いのです。

article、section、divタグの違いと使い分け

ここではそれぞれの意味や使い方の違いについて解説します。

divタグについて

MDNによると、

フローコンテンツの汎用コンテナーです。 CSS を用いてスタイル付けがされるまでは、コンテンツやレイアウトには影響を与えません。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/div

と、されています。

もう少しかみ砕いた説明にすると、
「divタグは、特に意味を持たない、汎用的な範囲指定をするタグ」となります。

使いどころとしては、「レイアウトやデザインを整える際に、ひとまとまりになっていると便利な場合」です。

ちなみにdivは、「division」の略で、直訳すると「分割、境界(線)、仕切り」などの意味があります。

sectionタグについて

MDNによると、

HTML 文書の中で単独のセクション (区間) を表します。セクションを表現するより意味的に具体的な要素がない場合に使用します。必ずではありませんが、通常はセクションには見出しがあります。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/section

と、されています。

こちらもかみ砕いて説明すると、「章、節、項などの一つの意味を持ったまとまり」にを示す場合に使用します。

基本的には、見出し(h1やh2)があって、その下のコンテンツの中身(pタグなど)があり、それらのひとまとまりが意味のあるブロックとして考えられる場合に使用されます。

ちなみに「section」は直訳すると、「節、段落、項」などの意味があります。

articleタグについて

MDNによると、

文書、ページ、アプリケーション、サイトなどの中で自己完結しており、 (集合したものの中で) 個別に配信や再利用を行うことを意図した構成物を表します。例えば、フォーラムの投稿、雑誌や新聞の記事、ブログの記事などが含まれます。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/article

と、されています。

「それのみで独立した記事として完結している」範囲を囲う場合に使われます。

正直sectionタグとの違いが分かりにくいですが、ブログを例にすると多少理解しやすいかと思います。
例えば、

  •  個別投稿ページのメインコンテンツの内容
  •  アーカイブなどの記事一覧で、記事タイトル、投稿日、抜粋内容などの一記事分のまとまり

などにarticleタグが使われます。

ちなみにMDNのメモ欄にも、

要素の内容が個別の記事をまとめたものであれば、 <article> 要素がより適しているかもしれません。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/section

との記載があります。

イメージを絵にすると下のような感じになります。

個別投稿ページ(参考)
【参考】個別投稿ページ
アーカイブページ(参考)
【参考】アーカイブページ

section、articleタグ使用時の注意点

  • 無理に使用する必要はない
  • sectionタグにsectionタグやarticleタグを内包することが可能
  • articleタグにsectionタグやarticleタグを内包することが可能
  • articleタグに内包された要素は、articleに関する内容でなければならない
  • どちらもレイアウトやデザインのためには使用しない
  • 見出し(h1やh2など)が必要(※)

※HTML5.1の勧告を受け、全ての見出しをh1にする方法は撤廃されました。
 つまり、h1はページ内で1回のみの使用とし、articleやsection内は階層に見合った見出しを付けるべき、という意味です。

いかがでしたでしょうか?

正直なところ、「独立した記事」だとか「一つの意味を持ったまとまり」などは、書く人の解釈によって多少差が出てしまうと思います。

とにかく大切なのは、クローラーにとって理解しやすい構造にすることですので、「自分の中で決めたルール」をしっかり守り、ブレの無い文書構造にすることが重要です。