◀ 9.

HTML <br> 要素の正しい使い方と <p> / CSS white-space との使い分け

▶
編集
この記事の要点

  •  は強制改行を行う 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 から取得した文字列の表示によく使います。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. h1～h6要素
  2. p要素
  3. blockquote要素
  4. q要素
  5. cite要素
  6. ins要素
  7. del要素
  8. HTML em 要素（強調）の使い方と strong との違い
  9. br要素
  10. abbr要素
  11. dfn要素
  12. pre要素で整形済みテキストを表示する
  13. code要素
  14. samp要素
  15. kbd要素
  16. var要素
  17. bdo要素
  18. sup要素で上付き文字を表示する
  19. sub要素
  20. mark要素
  21. data要素
  22. time要素
  23. wbr要素
  24. bdi要素
2026-06-11 04:04:52 guest 203

人気ページ

最近更新/作成されたページ