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

ヨッチヨッチ

こんにちは!Web集客コンサルタントのヨッチです。
プロフィールを見る

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

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

ヨッチヨッチ

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

PS. 訪問者様へのお願い

当サイトは僕が一人で管理していて、記事数は550本以上あります。
なので、記事によってはリンク切れなどが発生している場合があります。

もしお気づきの点がありましたら、下にあるコメント欄からご報告いただけると嬉しいです。
もちろん、記事の感想とかメッセージも大歓迎です!

どんなコメントも励みになっていて、かならず返信しています。
本当にありがとうございます。

コメント欄に移動する