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

投稿日 2020年6月9日
更新日 2020年7月9日
著者 tomo
カテゴリープログラミング

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タグとの違いが分かりにくいですが、ブログを例にすると多少理解しやすいかと思います。
例えば、