この記事の要点

<div> は意味を持たない汎用ブロックレベルコンテナ。レイアウトとスタイル適用のための入れ物 HTML5 では <header> / <main> / <section> / <article> / <aside> / <footer> 等のセマンティック要素を優先 divitis (div 多用) は SEO・アクセシビリティ・保守性を損なう。意味のある要素に置き換える <span> はインライン版。テキスト中の一部だけスタイル付けに使う どうしても意味が定まらないとき、または display: grid / flex のラッパーに <div> を使う

<div> は汎用コンテナ

<div> (division) は意味を持たない汎用ブロックレベル要素です。それ自体は何の意味も持たず、CSS でスタイル適用したり JavaScript で操作したりするための「入れ物」として使われます。

HTML4 時代はレイアウト構築のために <div class="header"> / <div class="footer"> のように多用されていましたが、HTML5 では意味のあるセマンティック要素に置き換えることが推奨されています。

<!-- ❌ 古い書き方 (HTML4 風) -->
<div class="header">
    <div class="logo">Logo</div>
    <div class="nav">...</div>
</div>
<div class="main">
    <div class="article">...</div>
    <div class="sidebar">...</div>
</div>
<div class="footer">...</div>

<!-- ✅ HTML5 セマンティック -->
<header>
    <h1>Logo</h1>
    <nav>...</nav>
</header>
<main>
    <article>...</article>
    <aside>...</aside>
</main>
<footer>...</footer>

セマンティック要素優先の理由

観点	<div> のみ	セマンティック要素
SEO	クローラーが構造を理解しにくい	記事 (article) / ナビ (nav) を識別
スクリーンリーダー	「div, div, div ...」と読み上げ	「ナビゲーション、メイン、フッター」と認識
キーボード操作	ランドマーク間スキップ不可	ランドマーク間ジャンプ可能
CSS	class セレクタ必須	要素セレクタで指定可能
HTML Outline	暗黙のセクション無し	明示的なドキュメント構造

ARIA role で補強

レガシー HTML でどうしても <div> を使うときは ARIA role でセマンティクスを補えます。ただし、ネイティブのセマンティック要素を使う方が優先です (Rule of ARIA "No ARIA is better than bad ARIA")。

<!-- ARIA で意味を付与 (やむを得ない場合) -->
<div role="banner">          <!-- = header -->
<div role="navigation">       <!-- = nav -->
<div role="main">            <!-- = main -->
<div role="article">         <!-- = article -->
<div role="complementary">    <!-- = aside -->
<div role="contentinfo">      <!-- = footer -->
<div role="search">          <!-- 検索ランドマーク (HTML5 にネイティブ無し) -->

divitis (div 多用症)

意味なく <div> を入れ子にしまくる悪習を divitis (div 中毒) と呼びます。React / Vue の隆盛で再び見られる現象です。

<!-- ❌ divitis: 無意味な div ネスト -->
<div class="card">
    <div class="card-inner">
        <div class="card-content">
            <div class="card-title">
                <div class="title-text">タイトル</div>
            </div>
            <div class="card-body">
                <div class="body-text">本文</div>
            </div>
        </div>
    </div>
</div>

<!-- ✅ セマンティック + 必要最小限の div -->
<article class="card">
    <h2>タイトル</h2>
    <p>本文</p>
</article>

React / Vue のフラグメント

SPA フレームワークでは「親要素が必要だが意味的に <div> を増やしたくない」というケースが頻発します。Fragment を使うと余計な <div> を回避できます。

// ❌ 不要な div で囲む
function Card() {
  return (
    <div>
      <h2>Title</h2>
      <p>Body</p>
    </div>
  );
}

// ✅ Fragment で囲む
function Card() {
  return (
    <>
      <h2>Title</h2>
      <p>Body</p>
    </>
  );
}

// Vue 3 は複数ルートをサポート
<template>
  <h2>Title</h2>
  <p>Body</p>
</template>

CSS Grid / Flexbox のラッパーとしての div

レイアウト目的の <div> は許容されます。意味があるならセマンティック要素、純粋にレイアウトだけなら <div> と使い分けます。

<main>
    <h1>記事一覧</h1>

    <!-- レイアウト目的の div は OK -->
    <div class="grid-3-col">
        <article>...</article>
        <article>...</article>
        <article>...</article>
    </div>
</main>

<style>
.grid-3-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
</style>

div と span の違い

要素	display	用途
<div>	block (改行する)	セクション / カード / コンテナ
<span>	inline (改行しない)	テキスト中の一部を装飾

<!-- div: 改行する -->
<div>A</div>
<div>B</div>
<!-- 表示: A の下に B -->

<!-- span: 改行しない -->
<p>これは <span style="color:red">赤い</span> テキストです。</p>
<!-- 表示: 1 行で「これは 赤い テキストです。」 -->

こんなときは何を使う?

目的	推奨要素
ページのヘッダー	<header>
サイト全体のナビ	<nav>
メインコンテンツ (1 ページ 1 つ)	<main>
独立した記事	<article>
章 / 関連コンテンツの塊	<section>
サイドバー / 補足	<aside>
フッター	<footer>
ボタン	<button>
カード型のレイアウトラッパー (意味なし)	<div>
Grid/Flex のラッパー	<div>
テキスト内の一部だけ装飾	<span>

FAQ

Q: <section> と <div> の違いは?
A: <section> は見出しを伴う関連コンテンツの塊。<div> は意味なし。section 内には <h2> 等の見出しを置きます。

Q: 全部 <div> で書いても動くじゃん?
A: 動きますが SEO / アクセシビリティ / 保守性で大きく劣ります。スクリーンリーダー利用者にはランドマークが無いページとして読まれます。

Q: <div> に onclick を付けたい
A: クリック可能な要素は <button> / <a> を使うべき。<div> にイベント付けるとキーボード操作 (Tab/Enter) や ARIA 対応が必要になり保守が大変。