HTMLの改行、brタグとpタグの使い分けは？正しい方法とNG例

HTMLで文章を改行したい時、<p>と<br>のどちらを使うべきか迷ったことはありませんか？これらは似ていますが、意味的な役割が全く異なります。適切なタグを使い分けることは、見た目だけでなく、SEOやアクセシビリティの観点からも非常に重要です。この記事では、<p>、<br>、<pre>という3つのタグの役割を明確にし、具体的な使い分けのタイミングを解説します。さらに、多くの初心者がやりがちなNGな使い方と、CSSを使った正しい対処法も紹介。この記事を読めば、HTMLの改行をマスターし、構造的に美しいコードが書けるようになります。

HTMLの改行で使う3つの基本タグ

HTMLの改行タグを正しく使い分けることは、コードの可読性だけでなく、SEOやアクセシビリティの向上にもつながります。まずは、それぞれのタグの違いを以下の表で確認してみましょう。

<p>は段落、<br>は強制改行、<pre>は整形済みのテキストと、それぞれの意味的な違いを明確にします。

pタグ

<p>タグは「Paragraph（段落）」の略で、ブログ記事やニュース記事など文章のまとまりを意味的に区切るために使用します。<p>タグで囲まれたテキストは、それ全体で一つの段落であることを示し、ブラウザでは段落の前後に自動で余白(マージン)が追加されるため、読みやすい文章構造を作れます。
—————————————————-

<p>これは最初の段落です。文章が続きます。</p>
<p>これは次の段落です。段落が変わると、このように余白ができます。</p>

これは最初の段落です。文章が続きます。

これは次の段落です。段落が変わると、このように余白ができます。
—————————————————-

プログラミングスクールなら
忍者CODE

brタグ

<br>タグは「Line Break（改行）」の略で、段落を変えずに改行だけを行いたい場合に使用します。住所や詩、歌詞など、行の区切り自体に意味があるコンテンツで利用されることが一般的です。<p>タグと違い、<br>は単に行を区切るだけで、段落を分ける意味合いはありません。
—————————————————-

<p>忍者CODEは、プログラミングを学ぶためのオンラインスクールです。<br>未経験からでも安心して学習を始められます。＜/p＞

忍者CODEは、プログラミングを学ぶためのオンラインスクールです。
未経験からでも安心して学習を始められます。
—————————————————-

preタグ

<pre>タグは「Preformatted Text（整形済みテキスト）」の略です。このタグで囲んだ部分は、入力したスペースや改行がそのままブラウザに表示されます。入力したスペースや改行がそのまま表示されるため、ソースコードやアスキーアートを掲載する際によく使用されます。
—————————————————-

<pre>
function hello() {
console.log("Hello, World!");
}
</pre>

 function hello() { console.log("Hello, World!"); }

—————————————————-

pタグとbrタグの使い分け

最も混同しやすい<p>と<br>について、どのような場面でどちらを使うべきかを具体例を挙げて解説します。ブログの文章など段落単位での区切りには<p>を、詩や住所表記など行の区切り自体に意味がある場合は<br>を使用します。

pタグを使う場面

話のまとまりや文脈が変わる「段落」を表現したいときに使います。ブログ記事やニュース記事など、ほとんどの文章で基本となるのがこの<p>タグです。
—————————————————-

<p>忍者CODEのカリキュラムは、実務で求められるスキルに特化しています。動画教材は分かりやすく、何度でも見返すことができます。</p>
<p>また、無制限のチャットサポートが付いているため、疑問点をすぐに解決できます。現役エンジニアの講師が、あなたの学習を徹底的にサポートします。</p>

忍者CODEのカリキュラムは、実務で求められるスキルに特化しています。動画教材は分かりやすく、何度でも見返すことができます。

また、無制限のチャットサポートが付いているため、疑問点をすぐに解決できます。現役エンジニアの講師が、あなたの学習を徹底的にサポートします。
—————————————————-

brタグを使う場面

段落は変えずに、行だけを区切りたいときに使います。代表的な例が、詩や歌詞、会社の住所表記などです。
—————————————————-

<p>
株式会社ラグザス・クリエイト<br>
〒530-0011<br>
大阪府大阪市北区大深町3-1<br>
グランフロント大阪タワーB18階
</p>

株式会社ラグザス・クリエイト
〒530-0011
大阪府大阪市北区大深町3-1
グランフロント大阪タワーB18階
—————————————————-

＼満足度90%以上！／

オンラインプログラミングスクール忍者CODE
無料相談はこちら>

HTMLの改行タグの注意点とNG例

HTMLで改行を実装する際は、単に見た目だけで判断するのではなく、タグ本来の役割を理解して使うことが重要です。

特に初心者の方は、余白を作るために<br>タグを連続で使用してしまうケースがあります。しかし、この方法はHTMLの構造を分かりにくくするだけでなく、SEOやアクセシビリティの観点からも推奨されていません。

レイアウト目的でbrタグを使わない

要素と要素の間に余白（スペース）を作りたいという理由で<br>タグを使うのは、最も代表的なNG例です。HTMLは文書の構造を定義するための言語であり、見た目の調整はCSSで行うのが原則です。

<p>上の文章</p>

<br>
<br>
<br>

<p>下の文章</p>

この書き方では見た目上は余白ができますが、HTMLの意味としては単なる改行を繰り返しているだけです。

<p class="section-spacer">上の文章</p>

<p>下の文章</p>

.section-spacer {
  margin-bottom: 3rem;
}

余白を作りたい場合は、CSSのmarginを利用しましょう。HTMLとCSSの役割を分離することで、保守性の高いコードになります。

brタグの連続使用

<!-- やってはいけない例 -->
<p>上の文章</p>
<br>
<br>
<p>下の文章</p>

上記のように<br>を連続で使うと、見た目はスペースが空きますが、文書構造として不適切であり、SEOやアクセシビリティの観点からも問題があります。

レスポンシブ対応を考慮する

PCの画面幅に合わせて<br>で改行を入れると、スマートフォンなどの狭い画面で見たときに、意図しない箇所で改行が起こり、非常に読みにくくなることがあります。デバイス幅に依存する改行は避けるようにしましょう。

<p>
HTMLを学ぶことで<br>
Webサイトを作成できるようになります。
</p>

画面サイズによっては文章が読みにくくなる可能性があります。

<p>
HTMLを学ぶことでWebサイトを作成できるようになります。
</p>

通常の文章はブラウザが自動で折り返してくれるため、不要な改行は入れないようにしましょう。

バージョンによる記述差

かつてXHTMLという規格では<br/>のようにスラッシュを付けるのがルールでしたが、現在の標準であるHTML5では<br>と書くのが一般的です（<br/>と書いてもエラーにはなりません）。基本的には<br>で統一すると覚えておきましょう。

WordPressでの改行の注意点

WordPressで記事を作成していると、「Enterキーで改行したのに思った通りに表示されない」「行間が広くなってしまう」といった経験をしたことがある方も多いのではないでしょうか。

実は、WordPressではEnterキーとShift + Enterキーで生成されるHTMLが異なります。

Enterキーを押した場合

WordPressのブロックエディタでは、通常のEnterキーを押すと新しい段落として認識されます。

<p>1つ目の段落です。</p>

<p>2つ目の段落です。</p>

ブラウザでは段落ごとに余白が追加されるため、文章のまとまりを分かりやすく表現できます。

Shift + Enterを押した場合

段落はそのままに、行だけを改行したい場合はShift + Enterを使用します。

<p>
株式会社ラグザス・クリエイト<br>
〒530-0011<br>
大阪府大阪市北区大深町3-1
</p>

住所や歌詞など、行の区切りに意味がある場合に適しています。

WordPressでよくある間違い

WordPress初心者によくあるのが、文章の見た目を整えるためにShift + Enterを何度も押してしまうケースです。

<p>
文章1<br>
<br>
<br>
文章2
</p>

このような改行は、見た目を調整するためだけに<br>タグを利用している状態です。

文章の区切りにはEnterキーを使用し、余白を調整したい場合はCSSのmarginを利用しましょう。

WordPressで作成した記事も最終的にはHTMLとして出力されます。HTMLの正しい意味を理解しながら改行を使い分けることで、読みやすく保守しやすいコンテンツを作成できます。

CSSで改行をコントロールする方法

HTMLの改行は<p>タグや<br>タグで表現できますが、実際のWeb制作ではCSSを使って改行や余白を制御する場面も多くあります。特にレスポンシブデザインでは、画面サイズに応じてテキストの折り返し方が変わるため、CSSによる改行制御の知識が欠かせません。

ここでは、実務でよく使用される以下の3つの方法を紹介します。

• marginで余白を調整する方法
• white-spaceで改行を制御する方法
• word-break・overflow-wrapで自動改行を制御する方法

marginで余白を調整する

要素間の余白は、CSSのmarginプロパティで調整するのが正しい方法です。例えば、段落間の余白を広げたい場合は、以下のようにCSSを記述します。

p{
 margin-bottom: 20px; /* 段落の下に20pxの余白を指定 */
}

white-spaceで改行を制御する

white-spaceプロパティを使うと、テキストの改行やスペースの扱いを制御できます。

例えば、特定のテキストを絶対に改行させたくない場合はnowrapを指定します。

CSS
.no-wrap {
white-space: nowrap;
}

html
<p class="no-wrap">このテキストは画面幅が狭くなっても改行されません。</p>

word-breakとoverflow-wrapで自動改行を制御する

長い英単語やURLを表示すると、画面幅によっては要素からはみ出してしまうことがあります。そのような場合は、word-breakやoverflow-wrapを使用して自動的に折り返しを行います。

.long-text {
  overflow-wrap: break-word;
}

また、英単語を途中で折り返したい場合は、以下のように指定できます。

.long-text {
  word-break: break-all;
}

特に長いURLや英語の文章を掲載する場合は、これらのプロパティを活用することで、スマートフォンでも読みやすいレイアウトを維持できます。

＼満足度90%以上！／

オンラインプログラミングスクール忍者CODE
無料相談はこちら>

適切なHTMLの改行とSEO

なぜ意味的に正しいタグを使うことが重要なのかを、SEOとアクセシビリティの観点から解説。クローラビリティの向上や、スクリーンリーダーの読み上げ精度向上に繋がり、結果としてサイト全体の評価を高めることを説明する。

Googleなどの検索エンジンは、HTMLの構造を理解してページの内容を評価します。<p>タグで適切に段落分けされた文章は、トピックのまとまりとして認識されやすく、コンテンツの評価に繋がりやすくなります。不適切な<br>の多用は、文章構造を破壊し、検索エンジンに正しく内容を伝えられない可能性があります。

また、視覚障がいを持つ方が利用するスクリーンリーダー（読み上げソフト）は、HTMLのタグを解釈して音声を出します。<p>タグは「段落の区切り」として認識され、適切な「間」が生まれますが、<br>の連続は単なる改行として処理され、ユーザーに意図が伝わりません。適切なタグの使用は、全てのユーザーが情報にアクセスしやすくなる「ウェブアクセシビリティ」の向上にも不可欠です。

まとめ

改行は<p>と<br>の意味を理解し、適切に使い分けることが重要である点を再度強調する。

HTMLの改行について、重要なポイントは以下の通りです。

• <p>は「段落」、<br>は「行の区切り」と意味で使い分ける。
• 見た目の調整（余白）のために<br>を使わない。余白はCSSのmarginで調整する。
• 適切なタグの使用は、SEOやアクセシビリティの向上にも繋がる。

これらの基本ルールを守るだけで、あなたの書くHTMLコードは格段に読みやすく、そして質の高いものになります。ぜひ今日からのコーディングに活かしてみてください。

独学？スクール？

これからHTMLやCSSなどプログラミング言語の学習を始めようと考えている方、または最近学習を始めた方がいらっしゃるかと思います。

ただ、実際学習を始めるとなると

このように不安な気持ちになる方もいますよね。

たしかに、何かわからないことが出てきたとき、エラーが解決できないとき、誰かに相談できる環境がないことが理由でプログラミング言語の学習を挫折する方が多くいます。

実際にプログラミング言語初学者が挫折をする1番の理由は「不明点が発生した際に気軽に相談できる環境がない」という実態があります。

それだけ学習する環境が大事だということです。

そんな背景があるからこそ、プログラミングの勉強をする際にスクールを選ぶ方が多いのが事実です。

プログラミングスクールに通う理由は他にもあり

＼満足度90%以上！／

オンラインプログラミングスクール忍者CODE
無料相談はこちら>