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

こんにちは、ヨッチです。

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

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

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

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

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

pタグ brタグ
タグの意味 段落 改行
タグの役割 文章をまとめる 文章を改行する
使い分け 1つの段落ごとに囲む 改行したいときに挿入する
要素の種類 ブロックレベル要素 インライン要素
文章の装飾 できる できない

このように、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の違いをまとめて解説してきました。
一覧表で比較すると、こんな感じです。

pタグ brタグ
タグの意味 段落 改行
タグの役割 文章をまとめる 文章を改行する
使い分け 1つの段落ごとに囲む 改行したいときに挿入する
要素の種類 ブロックレベル要素 インライン要素
文章の装飾 できる できない

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

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

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

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

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

ヨッチヨッチ

最後まで読んでいただき、ありがとうございます。
どんなことでもコメントもらえると嬉しいです!
僕からもかならず返信しています。