Markdown で br タグを使う場面・使い方・注意点まとめ

Markdown で br タグを使うべき場面（表セル内・住所など）とサニタイズで消える原因、CommonMark の代替記法（行末スペース2つ・バックスラッシュ）の使い分け方を整理します。

この記事でわかること

  • <br> タグが Markdown のどの場面に向いているか
  • XSS 対策のサニタイザで <br> が消える仕組みと対処法
  • 行末スペース2つ・バックスラッシュなど、<br> に代わる CommonMark 記法
  • アクセシビリティとCSS との相性から見た注意点
  • チームのレビューで「br か空行か」を決めるときの基準

Markdown では、段落の区切りは空行、段落内の強制改行は行末スペース2つやバックスラッシュなどで表すのが基本です。それでも br（HTML の <br>） を使いたい場面はあります。代表例は、表のセル内で行を変えたいときや、住所・短い詩のように段落分けせず行だけ積みたいときです。ただし <br> は HTML として解釈されるため、ツールやサイトのポリシーによってはサニタイズで削除され、改行が消えたように見えることがあります。

<br> が向いている場面

表（GFM 等）のセルで、説明文を2行に分けたい場合に <br> がよく使われます。また、1つの段落として意味を保ちつつ、視覚的にだけ行を分けたいテキストにも向きます。逆に、本来は別段落にすべき長文を <br> だけでつなぐと、スマホ表示やスクリーンリーダー利用時に読みにくくなることがあるため、長い文章は空行で段落分けを検討してください。

<br> が適している例：

  • GFM の表セル内で2行に分けたい
  • 住所（郵便番号・都道府県・市区町村を別行に）
  • 詩・歌詞で同じ段落を保ちながら行を分ける
  • 短いステップを段落にしたくない場合

サニタイズと「効かない」現象

XSS 対策のため、多くの Web アプリは HTML タグを制限します。<br> が許可リストにないと、表示時に除去され、改行が失われます。ローカルのエディタでは見えても、本番のポータルでは消える、という差はこのためです。自前で変換パイプラインを持つ場合も、DOMPurify 等の設定で br を許可するかを明示する必要があります。

確認すべき設定：

  • 使用しているツール・CMS が HTML タグを許可しているか
  • DOMPurify などのライブラリで br が許可リストに入っているか
  • CI/CDパイプラインで HTML サニタイズが有効になっていないか

代替の記法

段落内改行の CommonMark 方式（行末スペース2つ、行末 \）はプレーンな Markdown だけで済み、HTML 許可に依存しません。ただしエディタ設定で末尾スペースを削除する場合は、バックスラッシュ方式の方が安全なことがあります。空行を1行入れると別段落になり、意味の区切りがはっきりします。<br> は「段落にしたくないが行だけ分けたい」という狭い用途に絞ると運用が楽です。

方法記法例向いている場面
空行テキスト\n\nテキスト段落を分けたい
行末スペース2つテキスト + 改行段落内で行を変えたい（エディタが削除しない場合）
バックスラッシュテキスト\ + 改行段落内で行を変えたい（エディタに強い）
<br>テキスト<br>テキストHTML 許可環境での表セル・住所など

アクセシビリティの観点

装飾目的で <br> を連続させて余白を取るような書き方は、支援技術の利用者にとってノイズになりがちです。意味のある区切りなら段落やリストの方が適切なことが多いです。

レンダラ・エディタごとの差

GitHub Flavored Markdown、CommonMark 準拠のパーサ、ノートアプリ独自の拡張では、HTML の扱いが異なります。「プレビューでは <br> が効くのに、CI で生成した HTML では消えた」というときは、変換ライブラリのオプション（html を許可するか、sanitize するか）を確認してください。同じ .md でも、ビルド環境と手元のプレビューで結果が分かれる典型例です。

表セル以外での注意

セル以外の本文で <br> に頼ると、後から CSS で行間や段落マージンを統一しづらくなります。デザインシステムやテーマで「段落のあいだは margin で取る」方針なら、<br> より空行＋段落の方がスタイルが当たりやすいです。どうしても1段落のまま行だけ分けたい短い箇所に限定するのが無難です。

運用とレビューで決めること

チームで「br と空行のどちらが正しい？」と議論になるときは、文の意味の区切りを基準にすると決めやすいです。段落を分けたいなら空行、同じ段落のまま行だけ分けたい短い箇所だけ <br> や hard break にする、というルールにするとレビューが楽になります。静的サイトジェネレータや CMS では 生 HTML を許可する設定がオフのままだと、<br> がエスケープされて文字列として表示されることもあるため、ビルド設定も合わせて確認してください。

よくある質問（FAQ）

Q. 表のセルで <br> を使ったら消えました

CMS やポータルの HTML サニタイザが <br> を除去している可能性があります。ツールのドキュメントで「許可されている HTML タグ」を確認し、<br> が含まれていなければ代替記法を検討してください。

Q. <br> と行末スペース2つはどちらが信頼できますか？

環境に依存します。<br> は HTML 許可が必要、行末スペース2つはエディタが末尾スペースを削除すると消えます。最も安全なのはバックスラッシュ \ による CommonMark ハード改行です。

Q. <br> を連続して書いたら余白が大きくなりました

装飾目的の連続 <br> は CSS の margin や padding で代替するのが適切です。アクセシビリティ的にも改行タグで余白を作るのは避けましょう。

Q. PDF に出力すると <br> が効いていない箇所があります

PDF は HTML を印刷パイプライン経由で生成するため、<br> の見た目は CSS の line-height や margin と組み合わさって変化することがあります。プレビューで確認しながら調整してください。

まとめ

<br> は便利ですが、HTML 許可と文の構造の両面を確認してください。代替として行末スペース・バックスラッシュ・空行を検討しましょう。迷ったら「段落として意味を分けたいか」だけを基準にすると、記法選びがぶれにくくなります。

関連記事

ツールMarkdown を HTML に（md to html）ブラウザで .md をプレビューし、レイアウトを調整して HTML をダウンロードできます。ツールを開く