p タグは「文章のひとかたまり」を表すタグ
まず一番大事なポイントからいきます。
<p> は
「文章のひとかたまり（段落）」を表すタグ です。
「一文ごと」ではなく、
「意味がひとまとまりになっている文章のかたまり」に使います。
本でいうと、
行頭が少し下がっていて、途中で改行されている“あの塊”が段落です。
HTML では、その「段落」を <p> で囲みます。
見た目としては、前後に少し余白が空きますが、
それは「段落だから区切る」という意味に基づいたデフォルト表示です。
p タグの基本的な書き方とイメージ
一つの話題ごとに p で囲む
例えば、自己紹介文を書くとします。
<h1>山田太郎の自己紹介</h1>
<p>こんにちは。山田太郎です。東京でフロントエンドエンジニアとして働いています。</p>
<p>普段は JavaScript や TypeScript を使って Web アプリケーションを開発しています。UI をきれいに作るのが好きです。</p>
<p>休日はカフェ巡りと写真撮影を楽しんでいます。最近はフィルムカメラにもハマっています。</p>
ここでは、
「自己紹介の挨拶」
「仕事の話」
「趣味の話」
という“意味のかたまり”ごとに <p> を分けています。
一文ごとに <p> を分ける必要はありません。
むしろ、意味がつながっているなら、複数文を一つの <p> にまとめる方が自然です。
p と改行（br）の違いをしっかり区別する
p は「段落の区切り」、br は「行の区切り」
初心者がよく混同するのが、<p> と <br> の役割です。
<p> は「段落の区切り」<br> は「同じ段落の中での行の区切り」
です。
例えば、住所を「1 つの段落」として書きたいけれど、
見た目としては行を分けたい場合はこうします。
<p>
〒123-4567<br>
東京都千代田区丸の内 1-2-3<br>
サンプルビル 5F
</p>
これは「住所」という一つの段落の中で、
行だけを分けています。
逆に、話題が変わるところで<br> を連打して空白を作るのは NG です。
悪い例：
<p>自己紹介の文章です。</p>
<br><br>
<p>仕事の話です。</p>
見た目の空白を増やしたいなら、
CSS で margin を調整するのが正しいやり方です。
p タグの中に入れてよいもの・よくないもの
基本は「インライン要素」を入れる
<p> の中には、
テキストやインライン要素（<a>, <strong>, <em>, <span> など）を入れます。
例：
<p>
私は <strong>JavaScript</strong> が好きです。特に
<a href="https://developer.mozilla.org/">MDN</a> のドキュメントをよく読みます。
</p>
ここでは、
「太字にしたい部分」を <strong>、
「リンクにしたい部分」を <a> で囲んでいますが、
どちらも段落の一部として自然に収まっています。
p の中に「ブロック要素」を入れるのは基本 NG
<p> の中に、<div> や <h1>、<section> などのブロック要素を入れるのは
HTML 的には正しくありません。
悪い例：
<p>
これはダメな例です。
<div>ここに div を入れてはいけません。</div>
</p>
ブラウザは自動的にタグを補正して表示してしまうことが多いですが、
構造としては壊れています。
「段落の中にさらに大きな箱を入れる」のではなく、
必要なら <div> や <section> の中に <p> を入れる、
という順番にします。
p タグと CSS：見た目は CSS に任せる
デフォルトの余白は「段落だから」ついている
ブラウザは、<p> の前後に
少し margin（余白）をつけて表示します。
これは「段落は他の段落と少し離れているもの」という
文書のルールに基づいたデフォルトです。
もし余白を変えたいなら、
CSS でこう書きます。
p {
margin: 0 0 1rem;
line-height: 1.8;
}
これで、
「下だけ 1rem 空ける」「行間を少し広げる」
といった調整ができます。
ここで大事なのは、
「見た目を変えたいから <p> をやめる」のではなく<p> は意味のために使い、見た目は CSS で変える
という考え方です。
JavaScript と p タグ：テキスト表示の“基本の受け皿”
動的なメッセージ表示にぴったり
JavaScript でメッセージを表示したいとき、<p> はとてもよく使う“受け皿”です。
例：ボタンを押したらメッセージを表示する
HTML：
<button id="helloBtn">あいさつする</button>
<p id="message"></p>
JavaScript：
const btn = document.querySelector("#helloBtn");
const message = document.querySelector("#message");
btn.addEventListener("click", () => {
message.textContent = "こんにちは！これは p タグに表示されたメッセージです。";
});
ここでは、<p id="message"> が「メッセージを表示する段落」として機能しています。
textContent でテキストを入れると、
HTML としてではなく“文字列として”安全に表示されるので、
ユーザー入力をそのまま出すときなどにも向いています。
よくある“やりがちミス”と直し方
ただの改行代わりに p を乱用する
悪い例：
<p>1 行目</p>
<p>2 行目</p>
<p>3 行目</p>
これが「一つの段落の中の行」なら、
本来は <br> か CSS で行間を調整すべきです。
逆に、
「それぞれが別の意味の文」であれば、
この書き方でも OK です。
大事なのは、
「意味として段落が分かれているか？」 を基準にすることです。
空の p で余白を作ろうとする
悪い例：
<p>本文です。</p>
<p></p>
<p>次の本文です。</p>
これは「空の段落」を作っているだけなので、
意味としては不自然です。
余白を作りたいなら、
CSS で margin を調整する方が正しいです。
初心者として「p タグ」で掴んでほしいこと
<p> は、
「文章のひとかたまり（段落）を表すタグ」 です。
一文ごとではなく、意味のまとまりごとに使う
行の区切りは <br>、段落の区切りは <p>
中にはテキストやインライン要素を入れ、ブロック要素は入れない
見た目の余白は CSS で調整し、<p> は意味のために使う
JavaScript からメッセージを表示する“受け皿”としてもよく使う
あなたが <p> を書くときに、
「これは一つの段落として意味がまとまっているか？」
と一度考えられるようになったら、
もう“なんとなくタグを置く人”から
“文章の構造を意識してマークアップする人”に進化しています。