br 要素は「ここで“行だけ”を折りたいときの改行スイッチ」
<br> は
「ここで行を折って、すぐ次の行から続けて書いて」
とブラウザに指示するためのタグです。
ポイントは、
「段落を分ける」のではなく
「同じ段落の中で行だけを変える」 ということ。
だから、文章の構造を変えるタグではなく、
“レイアウト寄りの小さな改行スイッチ”だとイメージしてください。
段落を分けたいときは p、行だけ変えたいときは br
p と br の役割の違いをはっきりさせる
まず、よく混ざるのが <p> との違いです。
<p>これは 1 つ目の段落です。</p>
<p>これは 2 つ目の段落です。</p>
これは「段落が 2 つある」という意味の構造です。
一方、<br> はこう使います。
<p>
住所：東京都〇〇区〇〇 1-2-3<br>
建物名：サンプルマンション 101 号室
</p>
ここでは「1 つの段落の中で、行だけを変えたい」ので <br> を使っています。
段落を分けたい → <p> を増やす
同じ意味のかたまりの中で行だけ変えたい → <br> を挟む
この切り分けがめちゃくちゃ大事です。
br の基本的な書き方とよくあるパターン
単体で完結するタグ
<br> は <img> と同じで、
開始タグと終了タグのペアではなく 単体で完結 します。
<p>
こんにちは。<br>
Web 開発の勉強を始めましょう。
</p>
これで「こんにちは。」のあとで行が変わり、
次の行に「Web 開発の勉強を始めましょう。」が表示されます。
住所・詩・歌詞・署名など「意味は一つ、行は複数」のとき
<p>
〒123-4567<br>
東京都〇〇区〇〇 1-2-3<br>
サンプルマンション 101 号室
</p>
<p>
バックエンドも<br>
フロントエンドも<br>
どちらも書けると楽しい
</p>
こういう「ひとまとまりだけど、行を分けたい」表現に<br> はよく使われます。
br を「レイアウト調整の道具」として乱用しない
余白を作りたいなら CSS を使う
初心者がやりがちな NG パターンがこれです。
<p>こんにちは。</p>
<br>
<br>
<p>次の段落です。</p>
「間を空けたいから <br> を 2 つ入れる」
これは HTML 的にはあまり良くありません。
見た目の余白は CSS で作る のが基本です。
<p class="greeting">こんにちは。</p>
<p class="next">次の段落です。</p>
.greeting {
margin-bottom: 2rem;
}
こうすると、
「この段落の下に余白を空けたい」という意図が
構造としてもスタイルとしてもきれいに分かれます。
<br> は「意味のある行の区切り」にだけ使う
「余白を増やすためのスペーサー」としては使わない
この意識を持てると、一気にコードがきれいになります。
JavaScript と br：動的にテキストを整形するとき
テキスト中の改行を br に変換する
ユーザーが入力したテキストに改行が含まれていて、
それを HTML に表示したいとき、\n を <br> に変換することがあります。
const text = "1 行目\n2 行目\n3 行目";
const html = text.replace(/\n/g, "<br>");
document.querySelector("#output").innerHTML = html;
HTML 側：
<p id="output"></p>
これで、
「1 行目」「2 行目」「3 行目」が
それぞれ別の行に表示されます。
ここでも、
「意味としては 1 つのテキストだけど、行を分けたい」
という場面なので <br> がちょうどいい役割を果たします。
br を使うか迷ったときの判断基準
自分にこう聞いてみる
「これは“段落が変わる”のか？
それとも“同じ段落の中で行だけ変えたい”のか？」
段落が変わるなら <p> を増やす。
同じ意味のかたまりの中で、
住所・詩・署名・短い行分けなどをしたいなら <br>。
もう一つ、
「見た目の余白を作りたいだけなら CSS に任せる」
というルールもセットで持っておくと、<br> の乱用を防げます。
初心者として「br タグ」で絶対に掴んでほしいこと
<br> は、
「同じ段落の中で行だけを折るためのタグ」 です。
段落を分けるのは <p>、
行だけ変えたいときに <br>。
住所・詩・歌詞・署名など「意味は一つ、行は複数」のときに向いている。
余白を作るために <br><br> を並べるのはやめて、
余白は CSS の margin や padding で作る。
あなたが <br> を書くときに、
「これは“意味の区切り”じゃなくて“行の区切り”だよな？」
と一度確認できるようになったら、
もう br を“レイアウトの苦し紛れ”ではなく、
“意図のある行区切り”として使えている状態です。