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

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

目次

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

div, section, article の使い分け方

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

div

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

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

<div class="wrapper">
  <section>
    <h1>投稿タイトル</h1>
    <p>投稿テキスト</p>
  </section>
</div>

section

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

<section>
  <h1>おしらせ</h1>
  <ul>
    <li>おしらせ(1)</li>
    <li>おしらせ(2)</li>
    <li>おしらせ(3)</li>
  </ul>
</section>

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

<section>
  <h1>投稿一覧</h1>
  <article>
    <h2>投稿タイトル(1)</h2>
    <p>投稿テキスト</p>
  </article>
  <article>
    <h2>投稿タイトル(2)</h2>
    <p>投稿テキスト</p>
  </article>
</section>

article

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

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

<article>
  <h1>Article Title</h1>
  <p class="author">投稿者名</p>
  <p>投稿テキスト</p>
  <article>
    <h2>その他の投稿</h2>
    <p class="author">投稿者名</p>
    <p>投稿テキスト</p>
  </article>
</article>

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

<article>
  <h1>div, section, article の使い分け方</h1>
  <section>
    <h2>各要素の概要</h2>
    <section>
      <h3>div</h3>
      <p>div 自体に文脈的な意味はなく、レイアウトや装飾等、多目的に利用できます。</p>
    </section>
    <section>
      <h3>section</h3>
      <p>section はそれ自体に意味があり、独立して成立しないコンテンツに利用できます。</p>
    </section>
    <section>
      <h3>article</h3>
      <p>article はそれ自体に意味があり、独立して成立するコンテンツに利用できます。</p>
    </section>
  </section>
</article>

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

まとめ

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

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

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

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents