MENU
コンテンツ再構築中

HTML: div, section, article の使い分け方

今更ですが、今回は HTML5 コーディング時にいつも迷ってしまう、div, section, article の使い分け方をおさらいしておきます。

INDEX

目次

  • div, section, article の使い分け方
  • まとめ

div, section, article の使い分け方

最初に言っておくと、HTML5 で登場した article や section をわざわざ使用しなくても div だけを使っても問題ない です。
このことを前提として、以下に詳細を説明します。

div

div を使うケースの多くは レイアウトやビジュアルデザインが主な利用用途 になっているかと思います。
div タグ自体に文章構造上の意味がないため、冒頭で説明した div だけを使ったコーディングで問題ない という結論になるわけです。

div 自体に意味はないため section や article を内包しても問題ありません。

[code]

投稿タイトル

<p>投稿テキスト</p>

[/code]

section

section は div と違い、文脈的な意味がある コンテンツに対し使用します。
また、section 内には hx(h1) が必須 となり、コンテンツが独立して成立しない 場合に用います。

[code]

おしらせ

  • おしらせ(1)
  • おしらせ(2)
  • おしらせ(3)

[/code]

section 内には、section もしくは article を配置できます。

[code]

投稿一覧

投稿タイトル(1)

<p>投稿テキスト</p>

投稿タイトル(2)

<p>投稿テキスト</p>

[/code]

article

article は section 同様、文脈的な意味がある コンテンツに対し行います。
section との違いは article 内のコンテンツが 独立して成立する 場合に用います。

内側の article が、外側の article の内容と関係がある場合、article を内包(ネスト)することができます。

[code]

Article Title

投稿者名</p>
<p>投稿テキスト</p>

その他の投稿

投稿者名</p>
<p>投稿テキスト</p>

[/code]

各 article 内に section を内包(ネスト)することもできます。

[code]

div, section, article の使い分け方

各要素の概要

div

<p>div 自体に文脈的な意味はなく、レイアウトや装飾等、多目的に利用できます。</p>

section

<p>section はそれ自体に意味があり、独立して成立しないコンテンツに利用できます。</p>

article

<p>article はそれ自体に意味があり、独立して成立するコンテンツに利用できます。</p>

[/code]

div -> section -> article という順番で、よりセマンティックになっていく感じです。

まとめ

HTML5 から登場した section と article ですが、WordPress 等のブログエンジンやテンプレートエンジン等で、あらかじめ設定済みのものをそのまま使うケースが多いです。

実際のところコンテンツをグルーピングしたい場合、div を使用すれば何も問題はないのですが、今はユニバーサルデザインを意識し開発することも求められますので、section や article を使い分け、各コンテンツの意味を考えながらコーディングしていくことも重要だと思います。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Please share it!
  • URLをコピーしました!
  • URLをコピーしました!
INDEX