IT総合Wiki
ヘルプ 問い合わせ ログイン

IT総合Wiki

IT総合Wiki

過去バージョン

この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:4
ページ更新者:guest
更新日時:2026-06-11 07:07:02

タイトル: div要素
SEOタイトル: HTML div 要素完全ガイド (HTML5 セマンティック)

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

は汎用コンテナ

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

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

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


Logo
...
...
...
...

Logo

...
...
...
...

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

観点
のみ
セマンティック要素
SEOクローラーが構造を理解しにくい記事 (article) / ナビ (nav) を識別
スクリーンリーダー「div, div, div ...」と読み上げ「ナビゲーション、メイン、フッター」と認識
キーボード操作ランドマーク間スキップ不可ランドマーク間ジャンプ可能
CSSclass セレクタ必須要素セレクタで指定可能
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

Q:

と
の違いは?
A:
は見出しを伴う関連コンテンツの塊。
は意味なし。section 内には

等の見出しを置きます。

Q: 全部

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

Q:

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

CWiki

CWiki ヘルプ 問い合わせ

Legal

利用規約 プライバシーポリシー

Feed

サイトマップ ページのフィード 掲示板のフィード

Account

ログイン
© 2017 Libra