HTMLで文章を作るときに欠かせないのが「段落タグ <p>」と「改行タグ <br>」です。
どちらも「文章を区切る」ために使われますが、意味と使い方はまったく異なります。
この記事では、初心者の方でも混乱しやすい「pタグ」と「brタグ」の違いを、例を交えながら分かりやすく解説します。
pタグとは？（段落を作るためのタグ）
<p>タグは「paragraph（段落）」の略で、文章をひとつのまとまりとして表すタグです。
つまり、「ここからここまでが1つの段落ですよ」とHTMLに伝える役割を持っています。
<p>これは1つ目の段落です。</p>
<p>こちらは2つ目の段落です。</p>
ブラウザで表示すると：
これは1つ目の段落です。
こちらは2つ目の段落です。
→ <p>タグで囲んだそれぞれの文章の間には、「自動的に余白（上下のスペース）」が入ります。
これはHTMLが「段落ごとに区切る」と認識するためです。
brタグとは？（行を変えるためのタグ）
<br>タグは「break（改行）」の略で、段落の中で1行だけ改行したいときに使います。
文章を続けながら、改行したい場所で使うタグです。
<p>こんにちは。<br>今日は良い天気ですね。</p>
ブラウザでは次のように表示されます：
こんにちは。
今日は良い天気ですね。
→ <br>は段落を分けるのではなく、「同じ段落の中で改行する」ためのタグです。
pタグとbrタグの違いを比較
| 比較項目 | <p>タグ |
<br>タグ |
|---|---|---|
| 意味 | 段落（まとまり）を作る | 行を改める（改行） |
| 表示結果 | 段落ごとに余白が入る | 行だけ変わる |
| 閉じタグ | 必要（</p>） |
不要（単独で使える） |
| 用途 | 複数の文章を区切る | 詩・住所・短い文章などの改行 |
| SEO上の意味 | 意味を持つ要素（構造化される） | ほぼ装飾的（意味は持たない） |
pタグの使い方のコツ
1. 文章ごとにpタグで囲む
1つのpタグに複数の話題を混ぜず、1つのまとまりごとにpタグで囲むのが基本です。
<p>HTMLはWebページの構造を作る言語です。</p>
<p>pタグを使うと、文章を段落ごとに整理できます。</p>
→ このように書くと、後でCSSでデザインを整えるときにも扱いやすくなります。
2. pタグの中にブロック要素は入れない
pタグの中には、hタグ（見出し）やulタグ（リスト）など、他の「ブロック要素」を入れてはいけません。
❌ 間違い例：
<p><h2>タイトルです</h2></p>
→ 正しくは：
<h2>タイトルです</h2>
<p>この段落では、内容を説明します。</p>
pタグは「文章のまとまり」専用のタグなので、文以外の要素を含めないように注意しましょう。
brタグの使い方のコツ
1. 詩や住所などで使う
詩や住所、自己紹介文など、「1つの段落内で改行を使いたいとき」に便利です。
<p>
〒100-0001<br>
東京都千代田区千代田1-1<br>
KEN株式会社
</p>
2. 連続して使うと行間を調整できる（ただし控えめに）
<p>1行目の文章。<br><br>2行目の文章。</p>
→ 空行を作ることも可能ですが、デザイン目的の改行はCSSで行うのが推奨です。
（例：margin-bottom や padding などを使う）
よくある間違いと注意点
| 間違い例 | 問題点 |
|---|---|
段落ごとに <br> で区切る |
構造が不明確になり、SEOにも不利 |
<p> の中に <p> を入れる |
HTML構文エラーになる |
デザイン目的で <br> を多用する |
レイアウト崩れ・メンテナンス性低下 |
👉 構造（意味）で区切るときは <p>、見た目の改行だけなら <br>。
実際の使い分け例
<h2>自己紹介</h2>
<p>
こんにちは、KENです。<br>
Web制作とWordPress開発をしています。<br>
趣味はカフェ巡りと写真撮影です。
</p>
<p>
このブログでは、HTML・CSSの基本を初心者向けに解説しています。
</p>
→ 「自己紹介文」は1つの段落内に改行を使い、「解説文」は別段落に分けています。
このように構造と意味を意識して書くのが理想的です。
SEO的な観点から
<p>タグは構造上の意味を持つタグであり、Googleも文章のまとまりを理解します。- 一方
<br>タグは、装飾的（見た目の改行）なので、検索評価にはほとんど影響しません。 - 長文記事では、構造を意識して
<p>で整理すると可読性・評価の両方が高まります。
まとめ
| タグ | 目的 | 注意点 |
|---|---|---|
<p> |
段落を作る | 構造的に文章を整理するために使う |
<br> |
行を改める | 段落内の軽い改行に使う（多用しすぎ注意） |
使い分けの基本ルール：
- 「段落を分けたい」→
<p>
- 「段落内で改行したい」→
<br>
著者からのひと言
最初のうちは「pタグとbrタグの違い」がわかりにくいかもしれませんが、
「意味のある区切りはp、見た目の改行はbr」と覚えるとすぐに慣れます。
今後CSSで文章の余白を調整するときも、この2つのタグの違いが大きな鍵になります。
次回は、「画像タグimgとalt属性の正しい書き方」についてです。
