この記事の要点

<br> は強制改行を行う HTML 空要素 正しい用途は「意味のある改行」: 詩・住所・歌詞・コードの 1 行など 段落の区切りに <br><br> 連発は非推奨 → <p> で段落分け HTML5 では <br> でよい。XHTML 互換にしたいなら <br /> SEO 上のペナルティは無いが、意味論を損ねると検索エンジン解析の精度が下がる

br 要素とは

Line Break。テキストの途中で強制的に改行するための HTML 空要素。終了タグ不要。

<!-- 住所: 行の区切りに意味がある -->
<address>
  〒100-0001<br>
  東京都千代田区千代田 1-1<br>
  電話: 03-1234-5678
</address>

<!-- 詩: 行が独立した意味を持つ -->
<p>
  古池や<br>
  蛙飛び込む<br>
  水の音
</p>

<!-- 歌詞 -->
<p>
  ドナドナド〜ナ〜ド〜ナ〜<br>
  子牛を乗せ〜て〜<br>
  ドナドナド〜ナ〜ド〜ナ〜<br>
  荷馬車が揺〜れ〜る
</p>

正しい用途 vs 誤用

シーン	正解	理由
住所	<br>	行の区切りに意味がある
詩・歌詞	<br>	行が作者の意図
連絡先（名前、肩書、会社）	<br>	1 ブロックの中の改行
段落の区切り	<p> で分ける	意味論的に独立した段落
項目リスト	<ul> + <li>	リスト構造
余白を空けたい	CSS margin / padding	<br><br> は古い手法
改行で見た目を整える	CSS のみ	HTML は構造、見た目は CSS

非推奨パターン

<!-- ❌ 段落の代わりに br 連発 -->
<div>
  これは第 1 段落です。<br><br>
  これは第 2 段落です。<br><br>
  これは第 3 段落です。
</div>

<!-- ✅ p で意味論的に分ける -->
<article>
  <p>これは第 1 段落です。</p>
  <p>これは第 2 段落です。</p>
  <p>これは第 3 段落です。</p>
</article>

<!-- ❌ レイアウトのために br -->
<div>
  画像:<br>
  <img src="x.jpg"><br>
  キャプション
</div>

<!-- ✅ figure で意味論 -->
<figure>
  <img src="x.jpg">
  <figcaption>キャプション</figcaption>
</figure>

HTML5 と XHTML の書き方

<!-- HTML5: 空要素は閉じタグ不要 -->
<br>

<!-- XHTML / 自己終了スタイル（HTML5 でも OK） -->
<br />

<!-- 古い書き方（HTML4） -->
<br>

<!-- ❌ 終了タグは存在しない -->
<br></br>

どれもブラウザは同様にレンダリングしますが、HTML5 では <br> 単独が標準です。

CSS で改行を制御

CSS の white-space プロパティで「改行コードをそのまま表示」も可能。<br> の代替として使えるケース:

/* 改行コードを保持して表示 */
.preserve-newlines {
    white-space: pre-line;  /* 改行は反映、連続スペースは詰める */
}

/* 完全に書いたまま */
.literal {
    white-space: pre;       /* 改行・スペース両方そのまま */
}

/* 改行しない（一行に詰める） */
.no-wrap {
    white-space: nowrap;
}

/* 改行は反映、スペースは折返し可（pre-wrap） */
.preserve-all {
    white-space: pre-wrap;
}

<!-- 改行コードがそのまま表示される -->
<p style="white-space: pre-line">
  詩の 1 行目
  詩の 2 行目
  詩の 3 行目
</p>

<!-- データベースから取った改行付き文字列をそのまま表示 -->
<div class="message-body" style="white-space: pre-line">
  {{ user.message }}
</div>

段落（<p>）との違い

項目	<br>	<p>
意味	行の中の改行	独立した段落
余白	無し	上下に margin（デフォルト 1em）
SEO / 解析	同一段落扱い	独立段落として認識
スクリーンリーダー	一瞬の間	段落単位で読み上げ
使い所	住所・詩	本文・記事

SEO 観点

• <br> 多用にペナルティはない（滞在時間ペナルティもない）
• ただし段落の意味論を失うと、検索エンジンが「ここまでが 1 段落」を判別できない
• 抜粋（meta description 自動生成）の品質に影響
• 音声検索・読み上げが不自然に

フォーム入力の改行を表示する

textarea の改行を反映するパターン:

// ❌ HTML を直接入れると XSS リスク
element.innerHTML = userInput.replace(/\n/g, '<br>');

// ✅ textContent でセット → CSS で改行を有効化
element.textContent = userInput;
element.style.whiteSpace = 'pre-wrap';

// ✅ または安全に nl2br
function nl2br(str) {
    const div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML.replace(/\n/g, '<br>');
}
element.innerHTML = nl2br(userInput);

<?php
// PHP の nl2br
echo nl2br(htmlspecialchars($message, ENT_QUOTES));

// Laravel Blade
{{ $message }}
<!-- → \n はそのまま、ブラウザに表示すると改行が無い -->

<div style="white-space: pre-line">{{ $message }}</div>
<!-- → CSS で改行反映、安全 -->

{!! nl2br(e($message)) !!}
<!-- → e でエスケープ → nl2br で改行を <br> 化 -->

アクセシビリティ

• スクリーンリーダーは <br> で短い間を取って次の行を読む
• 連続 <br><br> は SR で奇妙な間ができる → CSS の margin で空けるべき
• 住所など 1 ブロックの中の改行には適切

FAQ

Q: <br> と <br/> どっち？
A: HTML5 は <br> 推奨、XHTML 互換が必要なら <br/>。どちらもブラウザは同様にレンダリング。

Q: 余白を空けたい
A: CSS の margin / padding を使いましょう。<br><br> は古い手法で、デザイン変更に弱いです。

Q: 改行を CSS だけで制御したい
A: white-space: pre-line でテキスト内の改行コードを反映できます。DB から取得した文字列の表示によく使います。