HTMLの改行方法｜brタグとpタグの違い・正しい使い分けを解説

HTMLの改行はbrタグ・pタグ・CSSの3系統に分かれ、役割が違います。brは文中の強制改行、pは段落の区切り、余白調整はCSSのmargin。Enterで改行されない理由や、white-space等での折り返し制御、レスポンシブ改行のやり方を解説します。

この記事でわかること

結論を先に書きます

HTMLの改行は、用途で使うタグを変えるのが正解です。文章の途中で1行だけ折りたい時は <br>、意味のあるまとまりを分ける時は <p>、見た目の余白を空けたいだけなら CSS の margin を使います。

初心者がやりがちなのが <br> の多用です。改行をすべて <br> で済ませると、文書構造が崩れ、SEO・アクセシビリティの両面でマイナスになります。改行は「見た目」ではなく「意味」で選ぶ のが基本方針です。

brタグとpタグの違い

最初に、改行に使う2大タグの違いを整理します。結論は「<br>＝1行折る／<p>＝段落を分ける」です。

方法	タグ	役割	使うシーン
強制改行	<br>	文章の途中で1行だけ改行	住所・電話番号・詩など意味のある改行
段落区切り	<p>	意味のまとまりを段落として分ける	文章の段落を分けるすべての場面

<br> は「行を折るだけ」で、文書構造上の意味を持ちません。一方 <p> は「ここからここまでが1つの段落」という構造を表します。見た目が似ていても、ブラウザや読み上げソフトにとっては別物 です。

タグの全体像をまとめて確認したい方はHTMLタグ一覧（リファレンス）もあわせてご覧ください。

brタグ｜強制改行の使い方

<br> は文章の途中に強制的に改行を入れるタグです。終了タグは不要で、改行したい位置にそのまま置きます。

<p>郵便番号：〒100-0001<br> 住所：東京都千代田区千代田1-1</p>

brタグを使うべき場面

次のように、改行そのものに意味がある箇所だけに使います。

brタグを使ってはいけない場面

逆に、段落を分けたり余白を作る目的で <br> を連打するのは避けます。

<!-- × 段落を分けるためにbrを連続使用するのはNG --> <p>第1段落のテキストです。<br><br> 第2段落のテキストです。</p>




<!-- ○ 段落はpタグで分ける --> <p>第1段落のテキストです。</p> <p>第2段落のテキストです。</p>

段落の間隔を広げたいだけなら、<br> ではなく CSSの margin を調整します。見た目の調整は CSS の役割です。CSS の基本はCSSとは？書き方の基本・HTMLとの違いで解説しています。

pタグ｜段落の区切りの使い方

<p> は段落（パラグラフ）を表すタグです。ブラウザは <p> の前後に自動でスペース（margin）を入れます。

<p>HTMLはWebページの構造を定義する言語です。</p> <p>CSSはWebページの見た目を定義する言語です。</p>

pタグの3つの特徴

<p> で段落を分けると、見た目だけでなく構造面でもメリットがあります。

つまり <p> は「読みやすさ」と「機械的な理解しやすさ」を同時に満たすタグです。文章を分けるときは原則 <p> を使う、と覚えておくと迷いません。HTML全体の組み立て方はHTMLの基本構造で確認できます。

brとpの使い分けまとめ

ここまでの使い分けを1つにまとめます。迷ったらこの3行で判断してください。

目的	使うもの
意味のある段落の区切り	<p> タグ
文章の途中の改行	<br> タグ
レイアウトのための余白	CSSのmargin／padding

ポイントは 「余白」を作るのにタグを使わない ことです。余白はすべてCSSに任せると、構造と見た目がきれいに分離します。

HTMLで改行が反映されない理由

「エディタで改行したのにブラウザで改行されない」という疑問は、HTML学習の最初に必ずぶつかる壁です。これはバグではなく、HTMLの仕様です。

<!-- ↓ HTMLファイル上は改行があるが... --> <p>1行目 2行目</p>




<!-- ↓ ブラウザではスペース1つになる --> 1行目 2行目

HTMLでは、連続する複数のスペースや改行も スペース1つとして扱われます。これをホワイトスペースの折りたたみと呼びます。

そのため、表示上で改行を入れたいときは <br> または <p> を使うか、後述の CSS（white-space）で挙動を変える必要があります。ブラウザがHTMLを解釈して表示する流れはHTMLがブラウザに表示される仕組みで整理しています。

CSSで改行を制御する

ここからは一歩進んで、CSSによる改行・折り返しの制御を解説します。改行の最終的な見え方は、タグだけでなく CSS でも調整できます。

white-space プロパティ

テキストのホワイトスペース（空白・改行）の扱いを制御するプロパティです。値によって挙動が大きく変わります。

値	改行	スペース折りたたみ	自動折り返し
normal（既定）	無視	する	する
nowrap	無視	する	しない
pre	保持	しない	しない
pre-wrap	保持	しない	する
pre-line	保持	する	する

/* コードブロックなど、改行・スペースをそのまま表示 */ pre {   white-space: pre-wrap; }




/* 1行に収める（はみ出た部分を…で省略） */ .text-ellipsis {   white-space: nowrap;   overflow: hidden;   text-overflow: ellipsis; }

word-break / overflow-wrap プロパティ

長い単語やURLが画面からはみ出す問題を防ぐプロパティです。特に日本語サイトやスマホ表示で効きます。

/* どこでも折り返す（日本語の長文向き） */ p {   word-break: break-all; }




/* 長い単語・URLのみ折り返す（英文を崩しにくい） */ p {   overflow-wrap: break-word; }

break-all はどこでも折り返すため日本語に向き、overflow-wrap: break-word は単語の途中で割らないため英文に向きます。用途で使い分ける のが現実的です。

スマホだけ改行位置を変える（レスポンシブ改行）

見出しなどで「スマホのときだけここで改行したい」という場面は、<br> にクラスを付けてCSSで表示・非表示を切り替えます。

<h2>Webデザイナーが知るべき<br class="sp-only">HTML基礎</h2>

/* PC幅では改行用brを消す */ @media (min-width: 768px) {   .sp-only { display: none; } }

これでスマホでは指定位置で改行され、PCでは1行で表示されます。デザインの都合での改行はこの手法に寄せると、文章の構造を壊さずに済みます。

改行関連タグ・プロパティ早見表

最後に、改行に関わるタグ・プロパティを一覧にまとめます。コピーして手元に置いておくと便利です。

方法	記述	効果
brタグ	<br>	強制改行（1行）
pタグ	<p>テキスト</p>	段落区切り（前後にmargin）
white-space: pre	CSS	改行・スペースをそのまま表示
word-break: break-all	CSS	長い文字列をどこでも折り返す
overflow-wrap: break-word	CSS	長い単語・URLのみ折り返す
margin / padding	CSS	要素間の余白を調整

よくある間違いと正しい書き方

実務でつまずきやすいパターンを、NG・OKの対比で整理します。

<!-- × brタグを段落区切りに使う --> テキスト1<br><br>テキスト2




<!-- ○ pタグを使う --> <p>テキスト1</p> <p>テキスト2</p>



<!-- × 余白を作るためにbrを連続使用 --> <h2>見出し</h2> <br><br><br> <p>本文</p>



<!-- ○ CSSのmarginで余白を設定 --> <h2>見出し</h2> <p>本文</p>

/* ○ CSSで余白を調整する */ h2 {   margin-bottom: 32px; }

共通する考え方は 「構造はHTML、見た目はCSS」 の分離です。この役割分担を守るだけで、改行まわりの大半のトラブルは防げます。

よくある質問

まとめ

HTMLの改行は、用途に応じてタグとCSSを使い分けるのが正解です。

改行は <br> を多用せず、<p> タグとCSSを正しく使い分けましょう。構造はHTML、見た目はCSS の原則を守れば、読みやすく崩れにくいHTMLになります。HTMLを基礎から学び直したい方はHTML入門｜基本の書き方と学習ロードマップから始めると体系的に理解できます。

---

関連記事

• HTMLとは？基本構造・書き方
• HTMLの基本構造を徹底解説
• tableタグの書き方｜HTMLテーブルの作り方
• CSSとは？書き方の基本・HTMLとの違い

---

免責事項

---