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

ヨッチヨッチ

こんにちは!WordPressシステムマーケッターのヨッチです。
プロフィールを見る

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タグはほとんど使いません。
自動整形という機能で、タグを打たなくてもきちんと表示してくれるからです。

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

ヨッチヨッチ

最後まで読んでいただき、ありがとうございます!
こうしてブログでお会いできたご縁に感謝しています。