HTMLで文章を書いていて、
悩む人エディタでは改行されているのに、ブラウザでは1行になってしまう
悩む人pタグとbrタグ、何となく使っているけど正解が分からない
と感じたことはありませんか。
特にブログやWeb記事を書き始めたばかりの方ほど、改行の扱いでつまずきやすいものです。
この記事は、HTMLの改行タグに迷っている初心者の方に向けて、pタグとbrタグの違いから正しい使い分け、注意点、スマホ対応までを分かりやすく解説しています。
改行の悩みをスッキリ解消し、ワンランク上のブログ記事を目指しましょう。
かすがHTMLの書き方を初心者の方向けにわかりやすく解説している以下の記事もぜひチェックしてみてくださいね！
- pタグとbrタグの明確な違いと正しい使い分け
- HTMLで改行タグを使う際の注意点
- パソコンとスマホで改行位置を変える実践的な方法
HTMLで改行する主なタグはpタグとbrタグ
HTMLで文章を書いていると、「思った位置で改行されない」「見た目が崩れる」と悩むことは少なくありません。
HTMLで改行を表現するための代表的なタグはpタグとbrタグです。それぞれ役割が異なります。
ここでは、pタグとbrタグの基本を押さえつつ、正しい使い分けの考え方を理解していきましょう。
pタグとは？
pタグは「段落（paragraph）」を表すためのHTMLタグです。
文章のまとまりを示す役割を持ち、ブラウザ上では段落の前後に適度な余白が自動的に入ります。
そのため、単なる改行というよりも「意味のある文章の区切り」を表現したい場合に適しています。
<p>これは1つ目の段落です。</p>
<p>これは2つ目の段落です。</p>
上記のように記述すると、それぞれが独立した段落として表示され、読みやすいレイアウトになります。
SEOの観点でも、文章構造が明確になるため、基本的にはこちらを優先して使うのが望ましいといえるでしょう。
brタグとは？
brタグは「改行（line break）」を意味するタグです。文章の流れを切らずに、単純に表示上の改行だけを入れたいときに使用します。
段落として分けるほどではないが、行を変えたい場面で便利です。
<p>
住所：東京都渋谷区<br>
電話番号：00-0000-0000
</p>
このように、住所や詩、改行位置が明確に決まっている文章では効果を発揮します。ただし多用すると構造が分かりにくくなるため、使いどころを意識する必要があります。
pタグとbrタグの違いとは？
pタグとbrタグは、どちらも改行に関係するタグですが、役割や意味合いは大きく異なります。
違いを理解しないまま使ってしまうと、見た目は整っていても、HTMLとして不適切な構造になることがあります。
ここでは両者の本質的な違いを整理し、正しい使い分けができるようにしていきましょう。
| 項目 | pタグ | brタグ |
|---|---|---|
| 役割 | 段落（文章のまとまり）を表す | 表示上の改行を入れる |
| 意味（セマンティック） | あり（文章構造を示す） | なし（見た目のみ） |
| 上下の余白 | 自動で余白が入る | 余白は入らない |
| 主な使用シーン | 本文・説明文・ブログ記事 | 住所・詩・改行位置が固定の文章 |
| SEOへの影響 | 構造が明確になり評価されやすい | SEO効果はほぼない |
| 推奨度 | 基本はこちらを使う | 必要な場面に限定して使う |
タグ自体に意味を持つかどうか違い
pタグは段落を表すためのタグであり、文章構造そのものを定義します。
一方、brタグはあくまで表示上の改行を入れるだけで、文章の区切りとしての意味は持ちません。
ブラウザでの表示のされ方の違い
pタグを使うと、段落の上下に自動的な余白（マージン）が入り、視覚的にも文章の区切りが明確になります。対してbrタグは余白を生まず、行が変わるだけです。
SEOや可読性の面でも、評価されやすいのはpタグです。
検索エンジンはHTML構造を解析して文章の意味を理解するため、段落として適切にマークアップされたpタグの方が、コンテンツの品質を正しく伝えやすくなります。
この基準を意識することで、HTMLとしても、読者にとっても読みやすい記事を作成できるようになります。
pタグを使うのが適切な場合
pタグは改行タグの中でも、最も基本かつ重要な存在です。
しかし「どんな場面でもpタグを使えばいい」と理解していると、細かい使い分けができず、結果的に読みにくい文章になることがあります。
ここでは、pタグが本領を発揮する具体的なケースを整理し、なぜ適切なのかを感覚的に理解できるようにしていきます。
文章として意味のある区切りを作りたい場合
pタグは「段落」を示すタグなので、話題や内容がひと区切りするタイミングで使うのが最適です。
たとえば、説明文が数文続き、次に別の内容へ話が移る場面では、pタグで区切ることで論理構造が明確になります。
読者は無意識のうちに段落単位で文章を理解しています。そのため、適切にpタグが使われている記事ほど、内容をスムーズに追いやすくなります。
ブログ記事や説明文など長文コンテンツの場合
ブログ記事やコラムのように、ある程度の文字量があるコンテンツでは、基本的にpタグを使うのが前提になります。
brタグだけで改行された文章は、見た目は整っていても「1つの段落」として解釈されてしまい、構造が不自然になりがちです。
検索エンジンもHTML構造を読み取ってコンテンツを評価するため、pタグで段落を正しくマークアップしている記事のほうが、SEOの観点でも有利になります。
CSSで余白やデザインを調整したい場合
pタグはブロック要素であるため、CSSと組み合わせてデザインを柔軟に調整できます。
段落ごとの余白を変えたり、特定の文章だけ装飾を加えたりする場合でも、pタグで囲まれていれば制御がしやすくなります。
見た目と構造を分けて管理できる点も、pタグが推奨される大きな理由のひとつです。
brタグを使うのが適切な場合
brタグは便利な反面、使いどころを誤るとHTML構造を崩してしまいます。そのため「どんな場面で使うべきか」を明確に理解しておくことが重要です。
ここでは、brタグが適している代表的なケースを具体例とともに確認していきましょう。
改行位置があらかじめ決まっている文章
住所や連絡先、会社情報などは、表示する改行位置が決まっていることが多く、段落として分ける必要もありません。
このような場合、brタグを使うことで、意図したレイアウトをそのまま表現できます。
郵便番号・住所・電話番号を1つのまとまりとして見せたい場合には、brタグが最適です。
詩や歌詞、短いフレーズを並べたい場合
詩や歌詞のように、行の区切りそのものに意味がある文章でも、brタグは効果的です。
段落として分けてしまうと、本来のリズムや表現が損なわれてしまうため、表示上の改行として扱うほうが自然になります。
同一段落内で補足的に改行したい場合
1つの文章や段落の中で、補足情報や注釈を改行して見せたい場面もあります。
この場合、pタグの中でbrタグを使うことで、文章のまとまりを保ったまま視認性を高めることが可能です。
ただし、読みやすくする目的で安易にbrタグを多用すると、構造が分かりにくくなります。あくまで「表示上どうしても改行が必要なとき」に限定して使う意識が大切です。
HTMLで改行タグを使う際の注意点
改行タグは正しく使えば読みやすいHTMLを作れますが、間違った使い方をすると、見た目や評価に悪影響を及ぼします。
ここでは、初心者が特につまずきやすいポイントを整理し、それぞれをサンプルコード付きで解説します。
実例を見ることで、「なぜダメなのか」「どう直せばいいのか」が直感的に理解できるはずです。
エディタ上でEnterで改行してもブラウザには反映されない
HTMLでは、ソースコード上でEnterキーを押して改行しても、ブラウザ表示には基本的に反映されません。
以下のように書いても、表示上は1行として扱われます。
改行されないNG例：
<p>
これは1行目です。
これは2行目です。
</p>
ブラウザでは「これは1行目です。これは2行目です。」と続けて表示されます。
表示上の改行を反映させたい場合は、pタグで段落を分けるか、brタグを使う必要があります。
改行されるOKな例：
<p>これは1行目です。</p>
<p>これは2行目です。</p>
<p>
これは1行目です。<br>
これは2行目です。
</p>
HTMLは見た目ではなく構造を重視する言語である、という前提を理解しておくことが大切です。
余白を取るためにbrタグを連続で使用しない
見た目を整えるために、以下のようにbrタグを連続で使って余白を作ってしまうケースがあります。
改行タグで余白取っているNG例：
<p>文章の上</p>
<br>
<br>
<br>
<p>文章の下</p>
一見すると問題なさそうですが、これはHTMLとして適切な書き方ではありません。余白は改行ではなく、CSSで制御するのが正しい方法です。
CSSで余白取っているOKな例：
<p class="text-top">文章の上</p>
<p class="text-bottom">文章の下</p>
.text-top {
margin-bottom: 40px;
}
このようにしておけば、デザイン変更にも柔軟に対応でき、コードの意味も明確になります。
スラッシュあり（/）のbrタグは使用しない
古いHTMLやXHTMLでは、以下のような書き方が一般的でした。
スラッシュありのNG例：
<p>
改行します。<br />
次の行です。
</p>
HTML5では、スラッシュなしの記述が正しいとされています。
スラッシュなしのOKな例：
<p>
改行します。<br>
次の行です。
</p>
現在のブラウザではどちらも表示されますが、学習段階やブログ記事では、最新仕様に沿った書き方に統一するのが望ましいです。
記法を揃えることで、コードの可読性も向上します。
パソコンとスマホで改行位置を変える方法
パソコンでは読みやすいのに、スマホで見ると不自然な改行になってしまう──そんな経験はありませんか。
実は、デバイスごとに改行位置を調整する方法はいくつか存在します。
ここでは、実務でよく使われる代表的な方法を紹介し、スマホ時代に適したHTMLの考え方を身につけていきましょう。
CSSで表示・非表示を切り替えて改行する方法
最も一般的なのが、CSSのメディアクエリを使ってbrタグの表示を制御する方法です。
特定のbrタグにクラスを付けることで、PCでは改行し、スマホでは改行しない（またはその逆）といった調整が可能になります。
<p>
パソコンではここで改行<br class="pc-only">
スマホでは改行しません
</p>
/* パソコンのみ表示 */
.pc-only {
display: inline;
}
/* スマホ表示（画面幅768px以下） */
@media screen and (max-width: 768px) {
.pc-only {
display: none;
}
}
この方法は、文章構造を壊さずに見た目だけを調整できるため、実務でもよく採用されています。
spanタグ＋CSSで自然に改行させる方法
brタグを使わず、spanタグとCSSで改行をコントロールする方法もあります。
こちらは「状況に応じて折り返したい」場合に有効です。
<p>
<span class="break-point">パソコンとスマホで</span>
<span>表示を調整する例</span>
</p>
.break-point {
display: inline;
}
@media screen and (max-width: 768px) {
.break-point {
display: block;
}
}
スマホ時のみblock要素にすることで、自然な改行が発生します。文章の意味を保ったままレイアウトを調整できる点がメリットです。
無理に改行位置を固定しすぎない意識も重要
どんな方法でも共通して言えるのは、「すべての改行位置を厳密に制御しすぎない」ことです。
画面サイズやフォント設定はユーザーごとに異なるため、ある程度はブラウザに任せたほうが、結果的に読みやすくなります。
本当に必要な箇所だけ調整し、それ以外は自然な折り返しを活かす。この考え方が、スマホ対応では特に重要になります。
WEBデザイナー・フロントエンドのスキルを確実に身につけたい方へ
「WEBデザインやフロントエンドを学びたい」と思い立ったとき、多くの方がまず独学を選びます。
しかし、独学では「何をどこから学べばいいかわからない」「つまずいたときに誰にも聞けない」といった壁にぶつかることも少なくありません。
一方、スクールで学べば、正しい順序で、現場で使えるスキルを効率よく習得することができます。最短ルートでスキルを身につけたい方には、スクール学習がおすすめです。
かすが私は26歳で印刷業からWEBデザイナーを目指して学び始めましたが、やはり独学に限界を感じ短期スクールで学びました。本気でスキルを身につけたいならスクールはマジで行った方が良いです！
- カリキュラムが体系化されているため、基礎から応用まで無駄なく学べる
- 現役のプロから実践的なフィードバックを受けられる
- わからないことをすぐに質問・解決できる環境がある
- 制作課題を通じて、ポートフォリオが作成できる
- 学習仲間や講師とのつながりが、モチベーション維持につながる
- カリキュラムが現場で必要とされる技術に対応しているか
- 現役デザイナー・エンジニアが講師として在籍しているか
- ポートフォリオ制作のサポートが充実しているか
- 卒業後の就職・転職支援が用意されているか
- オンライン・通学など、自分の生活スタイルに合った受講形式か
遠回りせず、確実にスキルを身につけたいなら、プロに教わるのが一番の近道です。
WEBデザイナー・フロントエンドエンジニアとして一歩踏み出したいあなたにぴったりのスクールを、下記の記事でご紹介しています。ぜひチェックしてみてください。
HTMLの改行タグまとめ
ここまで、HTMLにおける改行タグの基本から使い分け、注意点、デバイス別の対応方法まで解説してきました。
最後に、記事全体のポイントを整理し、重要な点だけを負担なく振り返れるようにまとめます。
HTMLで改行を表現する主なタグは pタグ と brタグ の2つ
pタグ は段落を表し、文章構造を明確にするための基本タグ
- ブログ記事や説明文など、長文コンテンツではpタグを優先する
- SEOや可読性の面でも有利
brタグ は表示上の改行を入れるためのタグ
- 住所・詩・歌詞など、改行位置が決まっている文章に向いている
- 多用すると構造が分かりにくくなるため注意が必要
- エディタ上でEnterキーを押しても、ブラウザ表示には反映されない
- 余白を作る目的でbrタグを連続使用しない
- brタグは
<br>と記述し、古い<br />表記に統一しない
- brタグやspanタグにクラスを付け、CSSのメディアクエリで制御する
- すべてを固定せず、自然な折り返しを活かす意識も大切
改行タグを正しく使い分けることで、見た目が整うだけでなく、HTMLとしても意味のある、読みやすいページになります。
「文章構造はpタグ、表示上の調整はbrタグとCSS」という基本を押さえておけば、改行で迷うことはほとんどなくなるでしょう。
