【HTML】pタグとbrタグの違いとは？一覧表でわかりやすく比較してみた！

ヨッチ

こんにちは。代表のヨッチです。
ミライヨッチにお越しいただき、ありがとうございます。

HTMLのpタグとbrタグ、この2つの違いって知ってますか？
どっちを使えばいいか、迷ってしまうこともありますよね。

この記事では、pとbrの違いをわかりやすい一覧表でまとめました！
なので、それぞれの役割をひと目で比較することができます。

タグの意味さえわかれば、誰でも簡単に使い分けることができますよ。
というわけで、さっそく2つの違いをチェックしていきましょう！

【HTML】pとbrの違いを一覧表で比較してみた！

それでは、pとbrの違いをまずは一覧表で比較してみましょう。

このように、pとbrの役割はまったく異なっています。

pは段落、brは改行として使われるのが基本中の基本です。
pで文章をまとめて、brで改行するということですね。

比較してみると、実はいろんな違いがあることをわかってもらえると思います。
これらを踏まえて、pとbrを使ってタグを書いてみましょう！

pとbrを使った文章の例

pとbrには役割があって、それぞれ使い分けることができます。
たとえば、次のような書き方ですね。

ソースコード

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

実際に表示される内容

テキスト
テキスト

上の文章は、1つの段落としてまとめられています。
1つの段落のなかで改行されている、ということです。

ちなみに、僕のブログでは段落ごとに余白が空くようになっています。
なので、文章に余白があるときは、段落で区切られているということです。

ワードプレスを使うときも、段落ごとに余白が空くように設定されています。

あらためて違いをチェックしてみよう！

文章の例を見てもらったので、あらためて違いをチェックしてみましょう！

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

pはブロックレベル要素と呼ばれていて、1つのブロックとして扱われます。
brはインライン要素なので、ブロックレベル要素の中に入っている一部という扱いです。

なので、pは開始タグと終了タグで文章を囲みます。
brは、改行したいところに挿入するだけでOKです。

pは文章のまとまりなので、色や形を装飾することができます。
brは改行を指定するだけなので、文章の装飾はできません。

【まとめ】pとbrの違いを知って使い分けよう！

ここまで、pとbrの違いをまとめて解説してきました。
一覧表で比較すると、こんな感じです。

2つの違いをわかってもらえたのではないでしょうか？

タグの種類によって構造が変わるだけでなく、デザインにも違いが出てきます。
どんな仕組みで動いているのかわかれば、さらに幅広い装飾も可能です。

なので、すぐに使わなくても「知っておくこと」が重要です。

僕の場合も、ワードプレスではpタグやbrタグはほとんど使いません。
自動整形という機能で、タグを打たなくてもきちんと表示してくれるからです。

しかし、タグの役割を知っておくことで、必要なときに自由に装飾ができます。
これからスキルアップを目指すなら、覚えておいて損はないですよ！