【実務・中級編】p要素とdiv要素の使い分け – HTML実践ガイド

「とりあえずdivで囲む」は卒業しよう。p要素とdiv要素の、現場で差がつく使い分け術

フロントエンドのコードレビューをしていると、どうしても目に付くのが「divの乱用」です。

「とりあえずこのテキストと画像をひとまとめにしたいから、divで囲んでおこう」

その気持ち、痛いほどわかります。僕も駆け出しの頃はそうでした。でも、マークアップを突き詰めると、HTMLは単なる「見た目を作る道具」ではなく「ブラウザに文脈を伝えるための言語」だということに気づかされます。今日は、そんな基礎中の基礎でありながら、中級エンジニアが今一度立ち返るべき「p要素とdiv要素の境界線」について、少し深い話をしましょう。

1. ブラウザの視点：divとpは「扱い」が全く違う

まず、ブラウザの内部的な話をします。開発者ツールで要素を眺めているだけでは気づきにくいのですが、ブラウザのレンダリングエンジンは、これらを全く別のものとして扱っています。

• `
  ` (Division/区分): HTML仕様において「コンテンツのグループ化」を目的とした汎用コンテナです。意味を一切持たないため、ブラウザはこれを単なる「空間の切り分け」として認識します。
• `

  ` (Paragraph/段落): 文字通り「段落」を意味します。ブラウザのユーザーエージェントスタイルシートには、`p`要素に対して上下にマージンを持たせる定義が標準で含まれていますよね。これは単なる装飾ではなく、「ここからここまでが一つのまとまった話題である」というセマンティクスを、視覚的・構造的に表現するための役割なのです。

最も重要なのは、「pの中にdivを入れてはいけない」というHTMLの仕様上のルールです。ブロックレベル要素の中にブロックレベル要素を入れてはいけないという古い概念とは少し異なり、HTML5では「p要素のコンテンツモデルはフレージングコンテンツ（テキストやspan、imgなど）のみ」と定義されています。つまり、pの中にdivを置いた瞬間、ブラウザは「DOM構築をやり直して無理やり修復する」という無駄なコストを支払わされることになります。

2. 「段落」の定義を再考する

では、具体的にどう使い分けるべきか。基準はシンプルです。

「それは、一つの文章（主張や情報の塊）として独立しているか？」

• pを使うべきケース: ブログの本文、製品説明のリード文、FAQの回答など。「一息ついて読める情報」の単位です。
• divを使うべきケース: カードコンポーネントの全体、グリッドの列、フォームのフィールド群など。単にレイアウト上の都合で「まとまり」を作りたい場合は、迷わずdivを使ってください。

ここでよくある誤解が、「短いテキストだからといって、何でもかんでもpにする」こと。単なるバッジや、メタ情報（作成日など）は、`` や `