HTMLのpとbrは何が違う？段落と改行を作例で確認しよう

HTMLで文章を次の行へ送るとき、pとbrは同じなのかな。見た目の空きだけでなく、文章のまとまりと、途中の改行を分けて考えてみよう。

ここでは、二つの短い文を使って、要素の違いを作例で確認する。ブラウザだけで試せるよ。

pは段落、brは改行

<p>最初の話題です。</p>
<p>次の話題です。</p>

これは二つの段落。一方、次は一つの段落の中に改行を入れている。

<p>東口の時計台前<br>午前10時に集合</p>

住所や詩など、内容として行の分かれ方が大切な場所ではbrが役立つ。一方、段落同士の余白を作るためにbrを何個も並べる使い方は避けたいね。

作例で構造も見てみる

下の作例を二つの段落・一つの段落内の改行へ切り替える。表示の下に、使っているpとbrの数を出すので、見た目だけでなく文章の構造を比べてみよう。

1. 二つの段落で、話のまとまりが二つあることを見る。
2. brの設定で、一つの段落の中の行が分かれることを見る。
3. リセットで二つの段落へ戻す。

段落の上下の空きはCSSで調整できる。作例の空きが、すべてのサイトで固定の値になるわけではないよ。

ソースに書いた改行とも別

通常のHTMLの文章では、ソースファイルで改行しただけでは、画面の同じ場所に必ず改行が出るわけではない。white-spaceなど、CSS側の扱いも関係する。

意味のまとまりを作るならp、内容として必要な行の区切りならbr、見た目の間隔ならCSSというように、目的から選ぶと整理しやすいよ。

仕様はbrとpのリファレンスを確認しよう。大きな話題の区切りには、見出しの基礎も参考になるよ。