◀ 7.

HTML div 要素完全ガイド (HTML5 セマンティック)

▶

編集

この記事の要点

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

は汎用コンテナ

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

HTML4 時代はレイアウト構築のために

のように多用されていましたが、HTML5 では意味のあるセマンティック要素に置き換えることが推奨されています。



    Logo
    ...


    ...
    ...

...



    Logo
    ...


    ...
    ...

...

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

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

ARIA role で補強

レガシー HTML でどうしても

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

divitis (div 多用症)

意味なく

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

React / Vue のフラグメント

SPA フレームワークでは「親要素が必要だが意味的に

を増やしたくない」というケースが頻発します。Fragment を使うと余計な

を回避できます。

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

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

// Vue 3 は複数ルートをサポート

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

レイアウト目的の

は許容されます。意味があるならセマンティック要素、純粋にレイアウトだけなら

と使い分けます。


    記事一覧

    
    
        ...
        ...
        ...

div と span の違い

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


A
B



これは 赤い テキストです。

こんなときは何を使う?

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

FAQ

と

の違いは?
A:

は見出しを伴う関連コンテンツの塊。

は意味なし。section 内には

等の見出しを置きます。

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

Q:
に `onclick` を付けたい
A: クリック可能な要素は

テンプレート

テーマ設定

子ページ

子ページはありません

同階層のページ

2026-06-11 00:16:55 guest 226

最近更新/作成されたページ

HTML aside要素完全ガイド（補足情報 / サイドバー / 引用 / article との違い） 2026-06-11 05:39:14
CSS transform 完全ガイド（translate / rotate / scale / skew / 3D 変形 + GPU 加速） 2026-06-11 05:39:14
Oracle 管理ツール完全ガイド（OUI / DBCA / SQL*Plus / OEM / Data Pump / RMAN 役割比較） 2026-06-11 05:39:14
HTML section要素完全ガイド（一般的なセクション / 見出し必須 / article との違い） 2026-06-11 05:39:14
CSS 背景プロパティ完全ガイド（background-color / image / size / gradient 一括指定） 2026-06-11 05:39:14
CSS フォント関連プロパティ完全ガイド（font-family / size / weight / 一括指定 / Web フォント） 2026-06-11 05:39:14
HTML li要素完全ガイド（ul / ol との関係 / value属性 / ネスト / アクセシビリティ） 2026-06-11 05:39:14
Java 日時 API 完全ガイド（java.time / LocalDate / Instant / Duration / 旧 Date と比較） 2026-06-11 05:39:14
Vue CLI でプロジェクト作成（npm install / vue create / npm run serve 手順 mac） 2026-06-11 05:39:14
JAX-RS 完全ガイド（Java EE で REST API 開発 / @Path / @GET / Jersey / RESTEasy） 2026-06-11 05:39:14
SQL DROP TABLE 完全ガイド（CASCADE CONSTRAINTS / PURGE / 復元 / Oracle・MySQL・PostgreSQL） 2026-06-11 05:35:25
Linux chown コマンド完全ガイド（再帰 -R / グループ変更 / 数値 UID / 注意点） 2026-06-11 05:35:25
Docker Desktop for Windows インストール完全ガイド（Hyper-V 有効化 / WSL2 / 動作確認） 2026-06-11 05:35:25
SQL ALTER TABLE MODIFY / ALTER COLUMN（カラム定義変更を Oracle / MySQL / PostgreSQL 別に解説） 2026-06-11 05:35:25
SQL ORDER BY 完全ガイド（昇順 / 降順 / 複数カラム / NULL 順序 / インデックス活用） 2026-06-11 05:35:25

ページ一覧

その他

HTML div 要素完全ガイド (HTML5 セマンティック)

は汎用コンテナ

Logo

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

ARIA role で補強

divitis (div 多用症)

タイトル

React / Vue のフラグメント

Title

Title

Title

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

記事一覧

div と span の違い

こんなときは何を使う?

FAQ

人気ページ

最近更新/作成されたページ