Web を作るとき（コーディングをするとき）に p 要素ってよく使いますよね！最も多く使う要素と言っても過言ではないと思います！でも意外とこの要素が、いったい何者なのかよく解らずに使っている人もいるかと思います。
今回は、この p 要素について『どんな要素なのか』、『どんなときに使うべきなのか』などなど、初心に帰って調べてみました。
p は
paragraph の略
p 要素の p は、
paragraph （パラグラフ：名詞）の略だと思われます。意味は、節や段落です。
単語
paragraph：（文章の）節、段落
セマンティック的にもそのまま段落という意味ですね！
余談ですが、
そういえば小中学生の国語の授業のとき、小説や小論文を読み解いたり作文を書く授業で、段落の見分け方が全く理解できずにテキトウにやり過ごしてきたことを、いま改めて思い出しました。。何となく雰囲気で感じろ的な、そもそも教わってないような。正直、段落って何なのさ！？って、感じです！
先生「段落に番号をつけましょう。〇〇君、段落③まで読んでください。」
わたし「あ、あ、はぃ、、い、今は昔、た、たた、竹取の、、、、（略」（先生！段落の見分け方がわかりません！教えてください！ほんまに！）って感じです。すみません。愚痴でした。今ならネットがあるのでそういった“勉強のテクニック”みたいなものを簡単に調べられるのは、すごいことですよね！
……。
……。
たぶん、HTML における p 要素は、“国語”における「段落」とは、また少し違うような気がするので、とくに詳しくは触れないでおきます。（今度、図書館で、小学生向けの国語の本、読んでこようかな……。）
p はブロック要素です。
意外にも？？
p 要素の display プロパティの初期値は、display: block;
です。
テキストを入れるときなどに p をよく使うので、ブロック感を感じていなかったのですが、ちゃんと調べてみると意外にもブロック要素なのですね、、、。
では、
ブロック要素である p 要素ができることとして、何があるの！？ってことですよね。今までコーディングをしているときに『あれ、p って〇〇できたっけ？……（ｶﾁｶﾁ）……あー、できた。』みたいなふわふわしたコーディングをしてましたが、
それも、今日で卒業だ！
p 要素は、
実はいろいろと
スタイリングできるのだ！
p 要素は、width、height や、margin、padding などさまざまなスタイリングができます！
なぜならブロック要素だから！
p 要素は、
レイアウトの制御も可能！
floot、flex、gridなどもばっちり設定できます！
なぜならブロック要素だから！
するかどうかさておき、、、
できるということを知っているだけで、Web デザインの幅が広がりますね！
p 要素は、
縦に積みあがっていく！
display: inline;との比較ではありますが、
インライン要素は、要素が左詰めされていくのに対して、p 要素は縦に積みあがっていきます。
なぜならブロック要素だから！！！
ちなみに 、左詰めされていくという具体例を上げると、例えば a 要素（リンクとか設定するのに使う要素）などは、インライン要素です。p 要素内のテキストの途中に入れたりしますよね。そしてその場合、違和感なく流れるようにテキストが続くと思います。そんな感じです、、、。
p 要素内に、
ブロック要素は入れられない。
p 要素内には、ブロック要素は入れられないという制約があります。
なぜ？と言われると、“そういうものだ”という HTML の仕様によるものです。具体的には、コンテンツモデルという概念に基づいた仕様です。コンテンツモデルがわからないよ！という方はよかったらては下記記事も見ていただけたらと思います！
p 要素のコンテンツモデル
p 要素が内包することができる要素は（コンテンツモデルは）、「フレージングコンテンツ（Phreasing content）」です。a 要素や img 要素、span 要素などなど、詳しくはこちら。（あえて言うならば「フレージングコンテンツ」というカテゴリにはブロック要素は存在しない、つまり div 要素は p 要素内に入れられないということです。）
ちなみに例えば a 要素などで、a 要素内部にフレージングコンテンツ以外が入っていると p 要素内に入れられないみたいです。p 要素内部は、子子孫孫どこまでいっても「フレージングコンテンツ」しか入れられないということですね。
仮に p 要素内にブロック要素を入れた場合、入れたブロック要素の前で、p 要素が閉じられてしまうようです。p 要素内に入れる要素は、a 要素や img 要素、span 要素など大体いつも決まったメンツですので、そんなに思い詰めなくてもよいとは思います。。
余白を作るときは
br ではなく、
p 要素で！
私が昔、HTML を覚えたてのころ、文章で余白を空けるときに br を多用してた記憶があります。このやり方はほとんどの場合、推奨されないやり方です！
br は改行するために使用する要素なので、br を連ねたところでセマンティック的には余白とはならないですね。人間が目で見たら余白に見えるのに。また、br に対して細かくスタイリングするのは難しいので、思い通りのデザインにできませんし、レスポンシブデザインにも適していません。
少し面倒ですが、原稿をコピペしたら p 要素で段落分けしましょう！（←小学生の先生かて！）
余白を空けるのは p 要素で設定
p 要素に margin または、padding を設定することで段落ごとの余白を作ります。どちらを使うかはサイトの方針で決めるのが良いと思います。
“margin は要素と要素のスペース”、“padding は要素の一部”と考えると…………解釈によってどうとでも選べますが、私は margin を使うことにしました。
なぜなら Google 様がそうしていたから。
神がそうしているのだから、間違いはないだろう……。
Google 様が運営しているこちらのブログ記事を見るとそうなっています。（記事の内容は特に本記事とは関係ありません。）
ちなみに
『margin-top と margin-bottom どっちがいいの？』もしくは『両方つけるの？』という疑問が出てくると思います。これにも流派があるようで、私はどちらかと言えば margin-top 派です。、、「隣接セレクター」での使い分けができるので、個人的には margin-top のほうが好きです。（隣接セレクターについては本記事では特に触れないでおきます。）
br はどういうとき使う？
br ってどんな時に使いますか？
いろいろと調べてなるほどなぁと思ったのが、例えば住所とかで、都道府県記載するときは br を使うのに適しているという感じですね。
なんというか、
普段使いで上手に使うにはセンスがいりますね！
私は苦手です。。
p 要素のスタイルは
キッチリしておきたい！
p 要素は、Web サイトの中でも特に多用する要素だと思うので、サイト運営をしているうちによくわからないスタイルが適用されてしまって頭を抱える原因になりうる要因だと思います……。
それを避けるためにも、サイトごとにルールを、基本的にはどこで使ってもそのルールで運用できるようにサイト立ち上げ時に最初に決めちゃうのがいいと思います。class や id、CSS のセレクタのルールなど、管理をきちんとしたいものですね！
まとめ
p 要素はパラグラフの略、段落という意味の要素です。基本的にテキストや、a 要素、img 要素を入れたりします。また、p 要素の中にブロック要素は入れることはできません。これはコンテンツモデルに則った HTML の仕様によるものです。
そして、p 要素自体はブロック要素で、padding や margin を設定することが可能です。文章中の余白として br をたくさん使ったりするのはやめましょう！
出典・参考文献
・W3C. 「4.5.1 The p element」. https://www.w3.org/TR/2011/WD-html5-20110525/grouping-content.html#the-p-element, 2024年8月7日閲覧。
weblio. 「paragraphとは 意味・読み方・使い方」. https://ejje.weblio.jp/content/paragraph, 2024年3月17日閲覧。
