HTML brタグ：改行方法とp・wbr・preの違い

HTML <br> は、テキスト内の指定した箇所で改行を挿入します。詩や郵便住所など、行の区切り自体が重要な場合に使用します。異なる段落は p で区切り、間隔は CSS で制御します。

br の構文とソースコード内の改行

brは内容も終了タグも持たない空要素です。</br>なしで<br>をHTMLで書きます。HTMLは<br />も認めますが、スラッシュが改行を発生させるわけではありません。

通常のデフォルトスタイルでは、ソース内の改行や連続するスペースは折りたたまれます。brは、ソースの書式設定に関係なく、内容内での改行を指定します。これは、画面が狭くなると自然にテキストが折り返されることとも異なります。

完全な例：ソースの改行、br、および段落を比較

次の文書をline-breaks.htmlとして保存し、ブラウザで開いてください。同じ短いテキストが異なる構造で表示され、結果を比較することができます。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>改行と段落の比較</title>
  <style>
    body { max-width: 36rem; padding: 0 1rem; margin: 1rem auto; }
    .message { margin: 0; line-height: 1.6; }
    .message + .message { margin-top: 1rem; }
  </style>
</head>
<body>
  <h1>改行を比較</h1>
  <h2>ソースコード内だけの改行</h2>
  <p id="source-only">1行目
    2行目</p>
  <h2>brによる改行</h2>
  <p id="with-br">1行目<br>2行目</p>
  <h2>別々の段落</h2>
  <p class="message">1つ目のテーマについての段落です。</p>
  <p class="message">2つ目のテーマについての段落です。</p>
</body>
</html>

最初のセクションは 1行目 2行目 として続けて表示されます。2 番目のセクションは br の後で改行されます。最後の 2 つの文は、CSS のギャップ 1rem を使った別々の段落です。非常に狭いウィンドウでも最初のセクションが折り返されることがありますが、それは br で指定された改行ではありません。

br、p、wbr、pre のいずれかを選択します

文章の後にbrを挿入して見た目上の長さを調整すると、小さい画面や大きい文字サイズでは不自然な折り返しが発生することがあります。通常の文章は自然に折り返しましょう。作成者が意図したスペースや行区切りを保持する必要がある場合は、HTML preタグの空白と改行の解説を参照してください。

空白や段落間隔にはCSSを使用してください

空白スペースを作るために繰り返し使用される br 要素は、意味的に異なる段落を1つにまとめてしまい、スクリーンリーダーでの段落ナビゲーションを難しくする可能性があります。新しい段落には p を、スペースには margin を使用してください。段落内の行間は line-height で制御します。

レイアウト手段として、廃止された clear 属性や br 自体のマージンを使用しないでください。意味のある行の区切りは、視覚的レイアウトとは別に管理し、テキストが画面幅やフォントサイズにかかわらず読みやすい状態を保ってください。MDNのbr要素リファレンス には、構文とアクセシビリティについて説明があります。