sectionとdivを使いこなして、ワンランク上のWebサイトを作ろう！

2024-04-02

HTMLにおける「section」と「div」の違い

意味

section: 文書を論理的に独立したセクションに分割します。各セクションは、見出しと本文で構成されます。
div: 特に意味を持たずに、ブロックレベルの要素を囲みます。

例:

<section>
  <h2>第一章 はじめに</h2>
  <p>この文書は、... について説明します。</p>
</section>

<section>
  <h2>第二章 ...</h2>
  <p>...</p>
</section>

使い分け

section:
- 文書を章、節、あるいは独立した内容に分割する場合
- 見出しと本文で構成されるセクションを区別する場合
div:
- 特に意味を持たずに、レイアウトやデザインのために要素を囲む場合
- section要素で表現できない複雑な構造を構築する場合

サイドバーやフッターなど、文書の構造とは関係なくレイアウトのために要素を囲む場合
画像ギャラリーやタブメニューなど、複雑な構造を構築する場合

補足:

section要素は、semantic HTML の一部としてHTML5で導入されました。
div要素は、HTML4から存在する汎用的な要素です。
section要素とdiv要素は、入れ子にして使用することができます。

まとめ

要素	意味	使い分け
section	文書を論理的に独立したセクションに分割	章、節、独立した内容
div	特に意味を持たずに、ブロックレベルの要素を囲む	レイアウト、デザイン、複雑な構造

<section class="article">
  <h1>記事タイトル</h1>
  <p>記事本文</p>
  <p>...</p>
</section>

<section class="author">
  <h2>著者</h2>
  <p>著者名</p>
  <p>...</p>
</section>

<section class="related-articles">
  <h2>関連記事</h2>
  <ul>
    <li><a href="#">関連記事1</a></li>
    <li><a href="#">関連記事2</a></li>
    <li><a href="#">関連記事3</a></li>
  </ul>
</section>

例2：商品ページ

<section class="product-info">
  <h1>商品名</h1>
  <img src="product-image.jpg" alt="商品画像">
  <p>商品説明</p>
  <p>...</p>
</section>

<section class="product-reviews">
  <h2>レビュー</h2>
  <ul>
    <li>
      <p>レビュー1</p>
      <p>...</p>
    </li>
    <li>
      <p>レビュー2</p>
      <p>...</p>
    </li>
    <li>
      <p>レビュー3</p>
      <p>...</p>
    </li>
  </ul>
</section>

<section class="related-products">
  <h2>関連商品</h2>
  <ul>
    <li><a href="#">関連商品1</a></li>
    <li><a href="#">関連商品2</a></li>
    <li><a href="#">関連商品3</a></li>
  </ul>
</section>

例3：ブログページ

<section class="blog-post">
  <h2>ブログ記事タイトル</h2>
  <p>記事本文</p>
  <p>...</p>
</section>

<section class="author">
  <h2>著者</h2>
  <p>著者名</p>
  <p>...</p>
</section>

<section class="comments">
  <h2>コメント</h2>
  <ul>
    <li>
      <p>コメント1</p>
      <p>...</p>
    </li>
    <li>
      <p>コメント2</p>
      <p>...</p>
    </li>
    <li>
      <p>コメント3</p>
      <p>...</p>
    </li>
  </ul>
</section>

<section class="related-posts">
  <h2>関連記事</h2>
  <ul>
    <li><a href="#">関連記事1</a></li>
    <li><a href="#">関連記事2</a></li>
    <li><a href="#">関連記事3</a></li>
  </ul>
</section>