HTMLで改行する3つの方法と使い分けのコツ

HTMLで改行する方法を知ると文章が見やすくなり、ぜひとも使いたいと考える人が多いものです。

しかし、仕組みをきちんと覚えないと伝えたい内容を明確にできないため、理解してから実際に使って文章を書く必要があります。

HTMLで改行するためには3つのタグがあり、それぞれの方法や使い分けるコツを覚えることが大事です。

この記事では3つの方法やそれらの違いを紹介するため、興味や関心があれば参考にしてみてください。

HTMLで改行するための3つの方法

実際にHTMLのソースコードで改行した場合はブラウザ上で反映されないため、以下の3つのタグを使う必要があります。

3つのタグは【pタグ】【brタグ】【preタグ】があり、それぞれの違いを確かめて書くことが大事です。

長い文章は改行しないと読みにくくなるため、HTMLでもブラウザ上にきちんと反映させるようにしましょう。

pタグで改行する方法

【pタグ】は段落を示すパラグラフ（paragraph）の頭文字から段落タグと呼ばれ、HTMLで改行する際に広く使われるタグです。

pタグはHTMLタグの改行方法としては最も一般的なものであり、開始タグと終了タグでテキストを囲んで記述します。

シンプルで覚えやすいため、慣れるまではこの方法だけで書くようにすると良いでしょう。

ただし、以下のような方法では改行されないため注意が必要で、文章の間に余白ができてしまいます。

記述例（誤った改行）

<p>あの人は
なかなか会えない</p>
→ 「あの人は　なかなか会えない」と1行に表示され、改行されません。

このため、以下のようにそれぞれの文を個別のpタグで囲む必要があります。

正しい記述例

<p>あの人は</p>
<p>なかなか会えない</p>

brタグで改行する方法

【brタグ】は改行を示す「break（ブレイク）」の略語で、その位置で1行改行することを示します。

【brタグ】は以下のように使うとブラウザ上に反映されます。

brタグの記述例

<p>野球の基本は<br>
キャッチボールにある</p>
→ 「野球の基本は」の後で改行され、次の行に「キャッチボールにある」と表示されます。

<br>タグの後ろに何も書かなければ空白になるため、スペースを作って読みやすくするためには最適です。

そのほか、【pタグ】をなるべく減らしたい場合にも有効で、区切りたい部分の前に<br>を入れるとスムーズに文章を書けます。

preタグで改行する方法

【preタグ】は、改行および半角スペースをそのまま表示できるタグです。

pタグはソースコード内の改行がスペースに変換されてしまう場合がありますが、preタグはその懸念がありません。

このため、わざわざ<br>を使わずに以下のように記述するだけで改行を出力でき、作業を効率化できます。

preタグの記述例

<pre>カチカチ山の
たぬきと
おさるさんは</pre>
→ ソースコードの改行がそのままブラウザに反映されます。

文章が長くなれば【preタグ】を使うことで途中にタグを挿入せず改行が反映され、作業を効率化できます。

改行はホームページやブログなどで読みやすくするために有効ですが、HTMLタグを使わないと反映されないため、正しい使い方を理解することが大切です。

この章のポイント

• HTMLで改行する方法は【pタグ】【brタグ】【preタグ】の3種類がある
• 【brタグ】は終了タグなしで改行できる
• 【preタグ】はソースコードの改行やスペースをそのまま反映できる

HTMLで改行するタグの使い分け

【pタグ】【brタグ】【preタグ】の3つのタグを改行に活用しますが、処理する量が増えると的確に使い分けないと間違えやすくなります。

改行で使われるタグは目的に合わせて設計されているため、それぞれの役割を理解しておくことが重要です。

ただし、慣れるまでは複数のタグを使うと混乱しやすくなるため、最初のうちは【pタグ】だけで改行してスムーズに書けるようにすることが効果的です。

pタグとbrタグの違い

【pタグ】と【brタグ】はどちらも改行に使えますが、それぞれの本来の目的が異なります。

pタグは「段落」を示すタグであり、文章を意味のある段落単位で区切って読みやすくするためのものです。

一方の【brタグ】は文章を途中で切ってから改行させる役割があり、段落の途中で改行したい場合に使います。

基本的にはpタグを使おう

実際のHTML記述では【pタグ】の使用が推奨されており、無理に【brタグ】を使うとミスにつながることもあります。

初心者であれば【pタグ】のみを意識的に使い、段落内で改行する場合にのみ【brタグ】を使うほうが良いでしょう。

スマートフォンなどで表示した際に改行位置がずれてしまうこともあるため、スマホ表示には特に注意が必要です。

【pタグ】はHTMLの中でも基本的なタグであり、文章の最初と最後につけるだけでよいため、慣れるまでは無理に【brタグ】を使わないようにすると良いでしょう。

preタグを使用する場面

【preタグ】は、改行およびスペースをそのまま表示したい場面で活用します。

改行が多いブログページやコードサンプルを掲載するページで使用する際に役立ちます。

また、【preタグ】はCSSだけで同じ動きを再現できるため、複数行のコードを掲載する場合には特に便利です。

ただし、横スクロールに対応させれば1文が長くなっても読めるため、必ずしも【preタグ】が必要とは限りません。

この章のポイント

• 【pタグ】や【brタグ】、【preタグ】はそれぞれ異なる役割がある
• 改行は基本的に【pタグ】を使い、慣れてきたら別のタグを活用しよう
• 【preタグ】はソースコードの表示など、改行が多い場面に最適

HTMLで改行する際に気を付けること

HTMLで改行する方法は3種類のタグを用いますが、注意点もあるため事前に確認する必要があります。

改行は文章を読みやすくするために便利ですが、HTMLではタグを使ってもイメージ通りにならないことも少なくありません。

HTMLでホームページやブログを読みやすくするためには、改行における注意点を理解し、タグの役割に合わせた使い方をすることが大切です。

brタグの連続使用は避ける

<br>は改行タグですが、2連続で使用すると1行分の余白が発生します。

この状態は<p>〜</p>を使って段落を作った場合と見た目が似てくるため、無理に連続使用する必要はありません。

HTML初心者は<br>を連続で使いがちですが、本来の使い方ではないため注意が必要です。

空白を作りたい場合はCSSで余白を調整し、不自然にならないようにすることが大切です。

また、<br>タグを連続して使うよりもCSSで余白を設定するほうが見た目が整い、バランスよく仕上がります。

SEO上の注意点

Googleは改行タグの連続使用を推奨していないため、上位表示を目指すならなるべく避けることが重要です。また、HTMLのバージョンによっては<br>ではなく<br/>を使う場合があるため、利用環境を確認しておきましょう。

デザインを無理に整えようとしない

HTMLで改行する際にデザインの調整を改行タグで行うことは避けるべきです。

【pタグ】や【brタグ】を使うと上下の間隔がCSSによって定められているため、使いすぎると意図しない表示になりやすくなります。

また、文章や画像との間隔が開きすぎていると余白の調整が難しくなり、読みづらい見た目になることもあります。

そのため、無理にHTMLの改行タグでデザインを整えようとするのではなく、CSSを使いながら微調整することが効果的です。

pタグは改行を目的としたタグでは無いことに注意

【pタグ】は改行を目的としたタグではなく、文章全体を段落で区切って読みやすくする役割があります。

改行のみを目的とする場合は【brタグ】を使うほうが適切です。

pタグは「段落としてまとめられている文章」を記述したい場合に使うのが理想的であり、短い文章に対して使うとまとまりが生まれます。

ただし、不自然な空白が入ってしまう場合は修正・削除することが大切で、初心者であれば無理に他のタグを使わないようにすると良いでしょう。

この章のポイント

• 【brタグ】の連続使用はデザインが崩れる原因になるため避けよう
• 【pタグ】は段落を示すタグであり、改行専用のタグではない
• デザインを調整する場合はCSSを活用しよう

HTMLを学ぶならプログラミングスクールがおすすめ

HTMLを学ぶ方法は独学でもできますが、覚えることが多く挫折する可能性があります。

プログラミングスクールは就職など目標に合わせてカリキュラムを選べ、HTMLの使い方を丁寧に教えてもらいながら就職サポートも受けられます。

HTMLで改行すると文章が読みやすくなりますが、デザインを細かく調整するためにはCSSを覚える必要があります。

講師が現役エンジニアのスクールであれば業界の最新情報が得られ、挫折せずに続けられるようサポートしてもらいやすくなります。

HTML・CSSはWebサイト構築における最も基本的なマークアップ言語です。

Webサイトを制作する際にはこれらの言語が扱えることが前提となるため、プログラミングスクールで体系的に学ぶと効率的です。

オンラインに対応しているスクールであればスキマ時間を有効に活用できるため、働きながら学びたい方にも向いています。

ただし、プロに教えてもらうためにはそれなりに費用がかかるため、目標に合わせたカリキュラムを吟味して選ぶことが重要です。

この章のポイント

• HTMLの改行コツはプログラミングスクールで学ぶと習得しやすい
• プログラミングスクールは目的や目標に合わせて選ぼう
• オンライン対応のスクールはスキマ時間を活用して学べる

まとめ

HTMLで改行する方法には、【pタグ】【brタグ】【preタグ】の3種類があり、それぞれの役割を理解することが大切です。

改行には基本的に【pタグ】を使い、段落内で改行したい場合にのみ【brタグ】を活用する使い分けが、初心者にとって最もミスが少ない方法です。

【brタグ】の連続使用は避け、デザインの調整が必要な場合はCSSで対応することで、崩れのない読みやすいページを作成できます。

よくある質問

<br>と<br/>の違いは？

改行を示す【brタグ】は基本的に<br>が使われますが、HTMLのバージョンによっては<br/>を用います。<br/>は「br」と「/」の間にスペースを入れると機能しなくなるため注意が必要です。なお、<br/>に対応するバージョンはXHTML 1.0などであり、利用しているHTML仕様を事前に確認して使い分けることが大切です。

改行タグの使い分けにおける基準は？

改行タグの基本は【pタグ】と【brタグ】です。段落を区切りたい場合は【pタグ】、段落の途中で改行したい場合は【brタグ】を使います。スマートフォンなど横幅に制限がある環境では文章が短くなるように工夫し、デザインの調整はCSSで行うことで、【brタグ】の連続使用による空白の崩れを防ぐことができます。