HTML 改行の基本｜brタグとpタグの正しい使い方

Webページを作成していると、「HTML 改行が反映されない」「改行できない」といった悩みを持つ方は多いでしょう。この記事では、HTML 改行の基本から、brタグ・pタグの正しい使い分け、そして改行できないときの原因と解決法まで、分かりやすく解説します。

Table of contents

HTMLで改行が反映されない理由を理解しよう
HTMLの構造と空白・改行の扱いの基本
改行を正しく表示するために必要なタグとは
HTMLで改行できないときのチェックポイント
改行を制御する他の方法・応用編
まとめ｜brタグとpタグを正しく使い分けよう

HTMLで改行が反映されない理由を理解しよう

まず理解しておくべきは、HTMLではソースコード上の改行や空白はブラウザで無視されるというルールです。つまり、テキストエディタで見た目を整えて改行しても、ブラウザ上ではそのまま1行に表示されてしまいます。このため、見た目上の改行を意図する場合には、HTML改行の正しい方法とタグの使い方を理解して、改行タグを明示的に書く必要があります。

HTMLの構造と空白・改行の扱いの基本

HTMLは文書の構造（Structure）を定義するためのマークアップ言語です。ブラウザはHTMLを読み取る際、連続した空白や改行を1つのスペースとして処理します。見た目上の改行を表現するためには、改行を指示するタグであるbrタグまたは段落を作るpタグを使うのが基本となります。

改行を正しく表示するために必要なタグとは

brタグで改行する方法と使い方のコツ

brタグは、最もシンプルなHTML 改行の手段です。文章の中で「ここで行を変えたい」と思った箇所に を挿入するだけで改行が反映されます。

基本構文
行1 
行2

上記のように書くと、行1と行2の間に1回の改行が入ります。

自己終了タグとしての特徴・XHTML・HTML5の違い
XHTMLでは のようにスラッシュ付きで自己終了タグを書く必要がありましたが、HTML5では だけで問題ありません。古いコードを扱う際に混在していても、現行ブラウザではほとんどのケースで正しく動作します。

複数の を連続使用する時の注意点
見た目のスペースを広げたいからといって、 のように連続で使用するのは避けましょう。これは構造的なマークアップとしては不適切で、SEO的にも好ましくありません。余白を作りたい場合は、CSSのmarginやpaddingを使うのが正しい方法です。

pタグで段落を作る方法と正しい使い方

pタグは段落（paragraph）を意味します。～で囲んだ部分が1つの段落として認識され、ブラウザ上では自動的に上下に余白が追加されます。このように、pタグは単なるHTML 改行ではなく、文のまとまりを明示する意味を持っています。

基本構文
この文章は1つ目の段落です。
この文章は2つ目の段落です。

これにより、自然な間隔で段落が区切られ、読みやすいレイアウトになります。

brとの違い・改行と段落分けの違いを理解する

brタグ：文中で行を変えたい時に使用（詩や住所など）
pタグ：意味のある段落ごとに使用（文章構造を作る）

例えば、住所を表記する場合にはbrタグが有効です。
〒100-0001 
東京都千代田区千代田1-1 
東京タワービル3F

一方で、説明文や記事本文などはpタグで構造を作る方が望ましいです。これによりSEO的にも意味のあるHTML構造として評価されやすくなります。

HTMLで改行できないときのチェックポイント

HTML 改行が反映されない・改行できないと感じるときは、以下の点を確認しましょう。

CSSで改行が抑制されていないか確認
white-spaceプロパティがnowrapなどに設定されていると、ブラウザは改行を無視します。特に以下のようなCSS指定がある場合は注意が必要です。
white-space: nowrap;
これを解除するには、white-space: normal;またはpre-line;を指定しましょう。
スマホやブラウザによって改行表示が異なる場合
スマートフォンでは、レスポンシブ対応によって改行位置が自動的に変わることがあります。固定幅のデザインを避け、テキストが自然に折り返されるようCSSを調整するのがポイントです。