目次
【完全保存版】HTMLで改行する方法まとめ｜br・p・CSSの違いと正しい使い分けを初心者向けに解説
HTMLを書いていると、
「改行したいのに、うまく改行されない」
という悩みに必ず一度はぶつかります。
この記事では、「html 改行」で検索した初心者の方に向けて、
HTMLで改行する正しい方法と、用途に応じた使い分けを
基礎から実践までわかりやすく解説します。
HTMLでは改行キーだけでは改行されない理由
HTMLでは、ソースコード上で改行しても、
そのまま画面上に反映されるわけではありません。
<p>
1行目
2行目
</p>上記のコードは、ブラウザ上では次のように表示されます。
1行目 2行目これは、HTMLが空白や改行を自動的にまとめて表示する仕様だからです。
HTMLで改行する基本的な方法
HTMLで改行する方法はいくつかありますが、
目的によって正しく使い分けることが重要です。
brタグで改行する方法
もっとも簡単な改行方法が、br タグを使う方法です。
<p>
1行目<br>
2行目
</p>brタグの特徴
- 強制的に改行できる
- 閉じタグが不要
- 文章中の改行に使われる
住所・詩・改行が意味を持つ文章などに適しています。
pタグで改行する方法（段落）
文章を区切る場合は、p タグを使います。
<p>1つ目の段落です。</p>
<p>2つ目の段落です。</p>pタグの特徴
- 段落として意味を持つ
- 上下に余白がつく
- SEO・アクセシビリティに適している
文章の改行には、基本的にpタグを使うのが正解です。
brタグとpタグの違い
初心者の方が混乱しやすいポイントなので、整理します。
| 項目 | brタグ | pタグ |
|---|---|---|
| 役割 | 改行 | 段落 |
| 意味 | なし | あり |
| 余白 | なし | あり |
| SEO | 影響なし | 構造として有効 |
👉
文章の区切り＝pタグ
文章中の改行＝brタグ
と覚えると分かりやすいです。
CSSで改行を制御する方法
HTMLタグを使わず、CSSで改行を制御することもできます。
改行を有効にするCSS
p {
white-space: pre-line;
}この指定をすると、HTML内の改行がそのまま反映されます。
white-space の主な値
normal：通常表示（初期値）pre-line：改行のみ反映pre-wrap：改行と空白を反映
テキストを動的に出力する場合によく使われます。
改行にdivタグを使うのは正しい？
以下のような書き方を見かけることがあります。
<div>1行目</div>
<div>2行目</div>見た目上は改行されますが、
文章の改行目的でdivを使うのはおすすめできません。
- divは意味を持たないブロック要素
- 文章構造として不適切
- SEO的にも評価されにくい
文章には、p や br を使いましょう。
HTMLで改行できないときのよくある原因
brタグを書いたのに改行されない
- CSSで
displayが変更されている white-spaceがnowrapになっている
CSSの影響を確認する方法
p {
white-space: normal;
}まずは初期値に戻して確認するのがおすすめです。
改行の正しい使い分けまとめ
初心者の方は、以下を基準にしてください。
- 段落を分けたい →
p - 文章中で改行したい →
br - 改行ルールを一括制御 → CSS（white-space）
- 見た目だけの改行 → CSS