今更ですが、今回は HTML5 コーディング時にいつも迷ってしまう、div, section, article の使い分け方をおさらいしておきます。
目次
- 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
その他の投稿
[/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で共有していただければ幸いです。
