Web制作者の人からしたら知ってて当たり前の知識ですが、ちょっとHTML書けます！くらいの人はやりがちなミスなので気を付けましょう。

そもそもp要素の正しい使い方とは？

<p>タグが表しているのは段落です。段落というと一般的には「テキストの集まり」という感覚になると思いますが、HTMLにおける段落というのはもう少し幅が広く、画像やフォームなどを入れることも構造上認められています。

<p>タグはブロック要素であり、さらにデフォルトで上下のmarginが設定されているので、適切に使えば<br>の改行を使わなくても文章を綺麗にまとめることが出来ます。

See the Pen Pタグ by Leo_8192 (@Leo_8192) on CodePen.

見やすくするために多少スタイルをいじりましたが、改行を挟まなくてもしっかり「段落」として区切られているのが分かると思います。

p要素の中にp要素を入れると…

<p>タグの中に<p>タグ（もしくは<div>や<h1>等のブロック要素）を入れると、こういう挙動になります。

See the Pen Pタグ by Leo_8192 (@Leo_8192) on CodePen.

3つの<p>タグで作った段落全体をさらに<p>タグで囲むと、このように不思議な表示結果になります。これを開発者ツールで見てみると…

はい、閉じタグや開始タグが勝手に挿入されています。これは別にバグではなく、正しい挙動です。

p要素が自動的に（勝手に）閉じられる条件

<p>タグは開始タグから次のブロック要素に当たったところで自動的に閉じタグが挿入されます。

よく使うところだと…

• p
• div
• h1~h6
• table
• ul
• ol
• dl

このあたりですかね。上手く使えばHTMLの記述量を減らすことが出来ますが、閉じタグの省略されたHTMLはかなり見にくいのでオススメはしません。

ちなみに、当たり前ですが<p>タグの中に<a>や<strong>などのインライン要素（フレージング・コンテンツ）を入れるのはOKです。

…ここらへんの話を始めちゃうとHTMLの「コンテンツ・モデル」っていう概念から話すことになってしまうので、この記事では触れません。気になる人はMDNを見てみよう！

正しいマークアップをしよう

<p>タグが勝手に閉じられてレイアウトが崩れてしまった！という人は、そもそもマークアップが間違っている可能性大です。普通に考えて「段落の中に段落（というかブロック要素）を作らなきゃいけない状況」なんてまずありませんので、もし段落や文章全体をラップしたいなら、<div>や<article>などの適切なタグを使いましょう。

---

初心者の方には少しややこしく感じてしまうかもしれませんが、各種タグの意味をしっかり理解すればこういう小さなミスはほとんどしなくなりますんで、暇な時にMDNのHTMLリファレンス等を見て理解を深めるのがオススメです。