WEB講座

へっぽこ講座
WEB講座
divタグばかり使ってない？sectionとarticleの使い分けdivタグばかり使ってな...

divタグばかり使ってない？sectionとarticleの使い分け

更新日：2026.10.18

※2026年10月更新：コード例を修正し、SEOとの関係を正確な内容に見直しました。header・main・navなどほかのよく使うタグ、よくある間違い、divを使ってよい場面を追加しました。

divタグを多用してる人をよく見かけるけど、パンちゃんはどうじゃ？

え、divタグって多用したらいけないんですか？

タグにはそれぞれ役割があるので、それを知った上で使うのはいいんじゃが、とりあえず何でもかんでもdivで囲んじゃえ！というのは良くないんじゃ。

<div>タグばかり使っていませんか？

HTMLを書くときに、<div>ばかり使っていないでしょうか？
内容のまとまりには、<div>ではなく<section>や<article>など、意味を持ったタグを使うのが基本です。

なぜ全部divで囲んではいけないのか

section、article、divは、どれを使っても見た目は変わりません。
では、どうしてdivではなくsectionやarticleを使ったほうがよいのでしょうか？

それは、この3つのタグにはそれぞれ違った役割があるからです。

■article（記事）
それだけを切り出しても意味が通じる、独立した内容を囲む

■section（章・節）
見出しのついた、テーマごとのまとまりを囲む

■div（division＝分割）
デザインやレイアウトのためにまとめる。タグ自体に意味はない

articleとsectionにはタグ自体に意味がありますが、divにはありません。

意味のあるタグを使うと、検索エンジンや、目の不自由な方が使う読み上げソフトなどにも、ページの構造が伝わりやすくなります。

あとから自分やほかの人がHTMLを見たときにも、どこに何が書いてあるのかがわかりやすくなります。

HTMLのルール（仕様書）でも、divはほかに合うタグがないときに使う「最後の手段」とされています。

※divをsectionに変えただけで、検索順位が上がるわけではありません。あくまで「ページの内容を正しく伝える」ための書き方です。

sectionとは

sectionは、テーマを持った1つのまとまりを表します。
たとえば、サイトのトップページであれば、下記のように書けます。

sectionの例

<section>
  <h2>ABOUT</h2>
  <p>このサイトは～……</p>
</section>

<section>
  <h2>CONCEPT</h2>
  <p>コンセプトは～……</p>
</section>

sectionの中身が、「ABOUT」「CONCEPT」という意味のある1つのまとまりになっていることがわかります。

sectionには見出し（h2など）を入れるのが基本です。見出しをつけられないまとまりは、テーマを持ったまとまりとは言いにくいので、見出しがない場合はsectionではなくdivを使うと考えるとわかりやすいです。

articleとは

articleは、そのページから切り出しても、それだけで意味が通じる内容を表します。
ブログの記事、ニュース、商品カード、コメントなどを囲むときに使います。

articleの例（ブログ記事とコメント）

<article>
  <header>
    <h1>ブログを始めました！</h1>
    <p><time datetime="2026-10-01">2026/10/01</time></p>
  </header>
  <p>今日からブログを始めてみまし……</p>
  <footer>
    <p>カテゴリ：<a href="/news/">お知らせ</a></p>
  </footer>

  <section>
    <h2>コメント</h2>
    <article>
      <p>更新楽しみにしてま……</p>
      <footer>
        <p><time datetime="2026-10-02">2026/10/02</time> by Taro</p>
      </footer>
    </article>
    <article>
      <p>更新がんばってくだ……</p>
      <footer>
        <p><time datetime="2026-10-03">2026/10/03</time> by Jiro</p>
      </footer>
    </article>
  </section>
</article>

記事全体がarticle、その中のコメント欄がsection、コメント1つ1つもそれだけで意味が通じるのでarticle、という構造になっています。

ほかにもよく使う、意味を持ったタグ

sectionやarticleのほかにも、ページの大きな構造を表すタグがあります。

■header：ページや記事の先頭部分（ロゴ、タイトルなど）
■nav：メインのメニューなど、ナビゲーション
■main：ページのメインの内容（1ページに1つ）
■aside：本文とは別の補足情報（サイドバーなど）
■footer：ページや記事の最後の部分（コピーライト、関連情報など）

これらを使うと、ページ全体の骨組みが、HTMLを見ただけでわかるようになります。