pタグに入れていいタグと入れたらだめなタグ

はじめに

HTMLを書き始めたばかりの頃、「pタグってとりあえず文字を囲えばいいんでしょ？」と思ってしまいがちです。実際、多少間違った書き方をしてもブラウザは表示してくれるため、問題に気づきにくいのも事実です。

しかし、pタグには明確な役割とルールがあります。これを理解していないと、レイアウト崩れ・CSSが効かない・HTMLバリデーションエラーなどにつながります。

この記事では、初心者向けに次の点を中心に解説します。

• pタグに入れて良い要素・だめな要素
• 仕様上OKでも避けたほうがいい書き方
• 初心者がやりがちなよくあるミス

pタグの基本的な役割

pタグは「文章のまとまり」を表現するための要素です。そのため、内部には文章を構成するインライン要素を入れることが前提になります。レイアウト用のブロック要素や、別の構造を持つ要素を入れる用途ではありません。

<p>これはひとつの段落です。</p>

pタグに入れて良い要素（OK）

原則として、pタグの中には**インライン要素（phrasing content）**を入れることができます。

主な例

• テキスト
• a（リンク）
• span
• strong / em
• b / i
• br
• img
• code
• small
• mark
• time

<p>
  <strong>重要:</strong>
  <a href="/about">こちらのページ</a>をご確認ください。<br>
  <img src="icon.png" alt="アイコン">
</p>

これらはいずれも「文章の流れの中に自然に入る要素」であり、pタグの目的と一致しています。

pタグに入れてはいけない要素（NG）

pタグの中にブロック要素を入れることはできません。仕様上も無効であり、ブラウザは自動的にpタグを閉じてしまいます。

主なNG例

• div
• p（pの入れ子）
• h1〜h6
• ul / ol / li
• table
• section
• article
• header / footer
• form

<!-- よくあるNG例 -->
<p>
  テキスト
  <div>ブロック要素</div>
</p>

このように書いた場合、ブラウザは次のように勝手にHTMLを書き換えて解釈します。

<p>テキスト</p>
<div>ブロック要素</div>

「エラーにならないから大丈夫」と思いがちですが、自分が書いたHTMLと実際のDOMが違う状態になるため、トラブルの原因になります。

よくある誤解

見た目が崩れなければOK？

一部のブラウザでは、NGな書き方でも見た目上は問題なく表示されることがあります。しかしそれはブラウザのエラー補正に依存している状態です。HTMLとして正しくありません。

divの代わりにpを使えばいい？

pタグはレイアウト用ではありません。余白を付けたい、ブロックとしてまとめたいという理由でdivの代わりにpを使うのは不適切です。意味に応じてタグを選ぶことが重要です。

正しい使い分けの指針

• 文章のまとまり → p
• 意味のないグルーピング → div
• 章や意味のある区切り → section / article
• 見出し → h1〜h6

初心者がやりがちなよくある例

divの代わりにpを使ってしまう

<p class="box">
  コンテンツ
</p>

余白や枠線を付けたいだけでpを使うのはよくあるミスです。pはレイアウト用ではなく、「文章の段落」を表す要素です。

改行したいだけでbrを連打する

<p>
  テキスト1<br>
  テキスト2<br>
  テキスト3
</p>

段落を分けたい場合は、brではなくpを分けるのが正解です。

見出しをpで書いてしまう

<p>お問い合わせ</p>

見出しには必ずh1〜h6を使いましょう。スクリーンリーダーや検索エンジンにも影響します。

できるだけ入れないほうがいい要素（非推奨・注意）

仕様上はpタグに入れても問題ないものの、可読性・保守性・意図の明確さの観点から、できるだけ避けたほうがよいケースもあります。

brの多用

<p>
  1行目です<br>
  2行目です<br>
  3行目です
</p>

改行目的でbrを多用すると、段落の意味が曖昧になります。文章の区切りであれば、pを分けるほうが適切です。

imgだけを入れたpタグ

<p><img src="sample.png" alt="サンプル"></p>

技術的には問題ありませんが、「段落」という意味を考えると不自然です。画像単体であればfigureやdivを使うほうが意図が明確になります。

spanの過剰なネスト

<p><span><span><span>テキスト</span></span></span></p>

スタイル調整のためだけにspanを増やすと、HTMLが読みにくくなります。CSS設計の見直しを検討しましょう。

豆知識

pタグは「自動で閉じられる」特殊な要素

pタグは、内部にブロック要素が来た瞬間に暗黙的に終了タグが補完されます。これはHTMLパーサの仕様で、バグではありません。

pタグの中に書けない要素は意外と多い

divやulだけでなく、sectionやarticle、formなどもNGです。「ブロック要素は基本NG」と覚えると判断しやすくなります。

バリデータを通すと一発で分かる

W3CのHTMLバリデータや、CIに組み込んだLintツールを使うと、pタグの誤用はすぐ検出できます。見た目で判断しないことが重要です。
なお、以下のバリデータがおすすめです。
https://validator.w3.org/

CSSで見た目を揃えたくなったら要注意

「marginが欲しいからpにした」というケースはよくありますが、それは意味的に誤りです。HTMLは意味、CSSは見た目、という役割分担を意識しましょう。

まとめ

• pタグは文章の段落を表す要素
• 中に入れられるのは基本的にインライン要素のみ
• ブロック要素を入れるとHTMLとして無効になる
• 仕様上OKでも、意味的に不自然な使い方は避ける

HTMLを正しく書くことは、可読性・保守性・アクセシビリティのすべてに直結します。pタグの役割を正しく理解し、適切に使い分けましょう。