過去バージョン

この記事の要点

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

br 要素とは

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

  〒100-0001

  東京都千代田区千代田 1-1

  電話: 03-1234-5678




  古池や

  蛙飛び込む

  水の音




  ドナドナド〜ナ〜ド〜ナ〜

  子牛を乗せ〜て〜

  ドナドナド〜ナ〜ド〜ナ〜

  荷馬車が揺〜れ〜る

正しい用途 vs 誤用

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

非推奨パターン

  これは第 1 段落です。


  これは第 2 段落です。


  これは第 3 段落です。




  
これは第 1 段落です。
  
これは第 2 段落です。
  
これは第 3 段落です。




  画像:

  

  キャプション




  
  

HTML5 と XHTML の書き方

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

CSS で改行を制御

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

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

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

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

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

  詩の 1 行目
  詩の 2 行目
  詩の 3 行目




  {{ user.message }}

段落（

）との違い

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

SEO 観点

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

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

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

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

// ✅ 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, '
');
}
element.innerHTML = nl2br(userInput);

{{ $message }}


{!! nl2br(e($message)) !!}

アクセシビリティ

• スクリーンリーダーは
で短い間を取って次の行を読む
• 連続

は SR で奇妙な間ができる → CSS の margin で空けるべき
• 住所など 1 ブロックの中の改行には適切

FAQ

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

Q: 余白を空けたい
A: CSS の margin / padding を使いましょう。

は古い手法で、デザイン変更に弱いです。

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