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

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

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

HTMLの改行に関連する主要な3つのタグ、

• <p>
• <br>
• <pre>

の基本的な役割を解説。<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
無料相談はこちら>

改行タグの注意点とNG例

タグ使用時に初心者が陥りがちな間違いを指摘。レイアウト目的での連続使用の禁止、バージョンによる記述の違い（<br>と<br/>）、レスポンシブ表示での崩れなど、具体的なNG例とその理由を説明する。

レイアウト目的の使用

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

brタグの連続使用

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

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

レスポンシブでの表示崩れ

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

バージョンによる記述差

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

CSSでの改行コントロール

HTMLタグだけでなく、CSSを使って改行を制御する方法を紹介。<br>の代わりにmarginで余白を調整する方法や、white-spaceプロパティで改行させない方法など、より高度なテクニックを解説する。

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>

＼満足度90%以上！／

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

適切な改行とSEO

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

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

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

まとめ

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

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

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

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

独学？スクール？

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

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

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

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

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

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

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

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

＼満足度90%以上！／

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