HTMLで改行する方法とは│pタグとbrタグの違いやコードの書き方を解説

HTMLでのテキスト改行には主に<br>タグと<p>タグが用いられます。これらのタグは、Webページのコンテンツを構造化し、読者にとっての読みやすさを高めるための基本的なツールです。

<br>タグは文章内の特定の位置での単純な改行を実現し、一方<p>タグは段落としてのまとまりを作るために使用されます。

例として、住所や歌詞のように特定の行での区切りが必要な場合には<br>を、物語や記事のようなテキストのブロックを区別する際には<p>を使用するのが一般的です。これらのタグの適切な使用法を理解することで、効果的なコンテンツ表現が可能となります。

読みやすい文章にするには改行は必須となります。改行が無く文章が続いている場合は、読みづらくユーザーの離脱率を高める事になります。今回はHTMLで改行するためのやり方について具体的な方法や注意点を踏まえて解説します。

尚、今スグpタグとbrタグ、preタグの違いを知りたい方は以下の表をご確認ください。

【改行出来るHTMLタグ比較表】

改行したい箇所でエンターキーを押し、HTML上で改行しているように見えたとしても、実際にユーザーがページを閲覧した際にブラウザ上で改行されるわけではありません。

【エンターキーを押して改行した場合の記述例】

<p>
HTMLで改行する
3つの方法
</p>

▼ブラウザ上での表示

HTMLで改行する3つの方法

このように、wordファイルやメモ帳などと異なりHTMLで改行する際には、以下のタグを使用する必要があります。

• pタグ
• brタグ
• preタグ

それぞれ解説します。

「pタグ」とは、<p>と</p>の間に記述したテキストを、ひとつの段落としてまとめて指定するHTMLタグです。

段落を意味するParagraphを略して、pタグと呼ばれています。Pタグは、連続するテキストやコンテンツを段落として構造的に区分けするために使用されます。そのため、文章の流れや構造を明確にするための主要な要素として頻繁に使われます。

【pタグの記述例】

<p>
HTMLは、要素と属性により成り立ちます。開始タグから終了タグまでの範囲を要素、それらの要素に何かしらの設定を加えるものを属性といいます。
</p>

▼ブラウザの表示

HTMLは、要素と属性により成り立ちます。開始タグから終了タグまでの範囲を要素、それらの要
素に何かしら
の設定を加えるものを属性といいます。

上記のように、ブラウザの幅に合わせて自動的に改行されます。

また、以下のように記述した場合、</p>が記述された箇所で改行されます。

<p>HTMLは、要素と属性により成り立ちます。</p><p>開始タグから終了タグまでの範囲を要素、</p><p>それらの要素に何かしらの設定を加えるものを属性といいます。</p>

▼ブラウザの表示

HTMLは、要素と属性により成り立ちます。
開始タグから終了タグまでの範囲を要素、
それらの要素に何かしらの設定を加えるものを属性といいます。

「brタグ」とは、改行する箇所を指定するHTMLタグです。改行を意味するBreakを略して、brタグと呼ばれています。

テキストの途中に<br>を記述することで、ブラウザでは記述した箇所で改行されます。単独で使用することができ、pタグのように、<br/>で閉める必要はありません。改行したい所でbrタグを入れると改行されます。

brタグは、文章や段落の間に改行を入れる場合や住所や連絡先を縦に並べる場合、詩や歌詞の各行を別々の行に表示したい場合に利用します。

【brタグの記述例】

改行を意味するBreakを略して、<br>brタグと呼ばれています。

▼ブラウザの表示

改行を意味するBreakを略して、
brタグと呼ばれています。

「preタグ」とは、指定した範囲のテキストをそのまま表示するHTMLタグです。整形済みテキストを意味するpreformatted textを略して、preタグと呼ばれています。

主に、ソースコードを紹介する際に使用されます。

前述したように、HTMLで以下のように記述すると、画面上では<br>が記述された箇所で改行されてしまいます。

改行を意味するBreakを略して、<br>brタグと呼ばれています。

一方、以下のようにpreタグを使って記述すると、途中で改行されることはなく、<br>という記述もそのまま表示されます。

<pre>改行を意味するBreakを略して、<br>brタグと呼ばれています。</pre>

▼ブラウザの表示

改行を意味するBreakを略して、<br>brタグと呼ばれています。

また、以下のように記述した場合、brタグを使用しなくても改行された状態のままブラウザに表示されます。

<pre>
改行を意味するBreakを略して、
brタグと呼ばれています。
</pre>

▼ブラウザの表示

改行を意味するBreakを略して、
brタグと呼ばれています。

ただし、自動改行されずに文が途切れる可能性があるため、改行を目的とした使用は避けるようにしましょう。

pタグとbrタグの違いは、任意の箇所で改行ができるかどうかです。
pタグを使用する場合、どこで改行されるかはブラウザの幅に左右されます。

一方、brタグを使用した場合、ブラウザの幅に関わらず、記述した箇所で強制的に改行されます。

また、pタグは指定したテキストをひとつのまとまりとして認識させるためのものであり、任意の箇所で改行させることを目的として使用するタグではありません。あくまでも、結果的に改行されるだけです。

一方、brタグは任意の箇所で改行することを目的として使用します。

▼ HTMLの改行で「pタグ」を使うタイミングは以下の3つです。

• 文章の段落が変わる
• brタグと併用する
• 文章の流れで画像を挿入する

「pタグ」を使うタイミングは、文章の段落が変わるときです。

■ pタグの記述例①

<p>
HTMLには、h1の他、ｐは段落、brは改行、aはリンク、ulは箇条書きリスト…といったように、様々な意味や役割・要素を持つタグがあります。中には、それ自体では特別な意味はなく、特定の範囲をグループ化するために使うタグも存在します。
</p>

上記は2つの文章で構成されていますが、「HTMLには…」で始まる文章と「中には…」で始まる文章にはつながりがあるため、それぞれを<p>と</p>で囲うのではなく、2文をまとめて<p>と</p>で囲い、ひとつの段落にします。

■ pタグの記述例②

<p>
また、HTMLのタグはｐタグのなかにspanタグを入れるなど、必要なだけタグを入れ子にして記述することができます。しかし、タグを記述する場所や位置に関しては、現在であればW3Cが策定している文法に従う必要があります。
</p>

上記の場合においても「また…」と「しかし…」にはつながりがあるので、<p>と</p>で囲います。
一方、記述例1と2にはつながりがなく別の話題となるため、<p>と</p>でまとめません。

「pタグ」を使うタイミングは、文章が長く、brタグを併用して改行しなければ読みにくいときです。

■ pタグの記述例③

<p>
CPC広告を出稿するデメリットは、特定のキーワードが話題になった場合のように、なんらかの事情で広告がクリックされてしまうと、想定以上に広告予算が消化されてしまうことです。
<br>
コンバージョンが見込めるユーザーに広告がクリックされるのであれば問題ありませんが、興味本位で広告がクリックされたり、コンバージョンが期待できないユーザーからクリックされたりすると、せっかくの費用が無駄になってしまいます。
</p>

上記のように、同じ段落ではあるものの、ひとつの段落として表示するには長すぎる場合に、brタグを併用して改行します。

「pタグ」を使うタイミングは、文章の流れで画像を挿入するときです。

■ pタグの記述例④

<p>テキストだけで情報を伝えようとするより、リッチメディアを併用した方がより分かりやすい情報の取得に繋がるため、ユーザーの興味を引き滞在時間を伸ばすことができるでしょう。</p>

<p><img src="○○○○.png" alt="ページの平均滞在時間"></p>

<p>Wistiaがおこなった調査によれば、動画が含まれていないページよりも、含まれているページの方が滞在時間が長くなっています。</p>

▼ブラウザの表示

ただし、divタグやfigureタグを使用して画像を挿入しても問題はありません。

▼ HTMLの改行で「brタグ」を使うタイミングは以下の2つです。

• 話題が変わらないテキストを途中で改行する
• 連続した短いテキストを改行する

HTMLの改行で「brタグ」を使うタイミングは、話題が変わらないテキストを途中で改行するときです。

■ brタグの記述例①

<p>
Googleのジョン・ミュラー氏は、<br>
文字数はコンテンツの品質を決定する要素ではない<br>
と発言しています。
</p>

上記のように、ひとつの文章の中に別の文章が含まれていて改行することで読みやすくしたい場合に、brタグを使用します。

HTMLの改行で「brタグ」を使うタイミングは、連続した短いテキストを改行するときです。

■ brタグの記述例②

<p>
会社名　オルグロー株式会社
住所　東京都渋谷区神泉町10－10 VORT渋谷神泉ビル6階
TEL　03-5784-4330
</p>

上記のように、短い文章が連続していて改行しないと読みにくい場合に、brタグを使用します。

▼ brタグを使ってHTMLで改行する際の注意点は、以下の6つです。

1. brタグをスペースを空ける目的では使わない
2. brタグの連続使用は避ける
3. brタグはバージョンによってタグが異なる
4. brタグはデバイスが変わると表示崩れする場合がある
5. brタグは行末に記述する
6. レイアウト調整の目的では使わない

HTMLで改行する際には、brタグをスペースを空ける目的では使わないようにしましょう。

brタグをひとつだけ記述した場合、改行されますが文章と文章の間にスペースは生まれません。

HTMLで改行する際には、brタグをスペースを空ける目的では使わないようにしましょう。
<br>
brタグをひとつだけ記述した場合には、文章と文章の間にスペースは生まれません。

▼ブラウザでの表示

HTMLで改行する際には、brタグをスペースを空ける目的では使わないようにしましょう。
brタグをひとつだけ記述した場合には、文章と文章の間にスペースは生まれません。

段落と段落の間にスペースを空ける場合には、pタグを使用しましょう。

HTMLで改行する際には、brタグの連続使用は避けるようにしましよう。

以下のようにbrタグを連続して記述すると、改行されるだけでなく、文章と文章の間にスペースを空けることができます。

HTMLで改行する際には、
<br><br><br>
brタグをスペースを空ける目的では使わないようにしましょう。

▼ブラウザでの表示

HTMLで改行する際には、


brタグをスペースを空ける目的では使わないようにしましょう。

ただし、brタグを過剰に記述すると、ソースコードが見づらくなったり、ページが重くなったりします。スペースを空ける場合には、brタグを使用するのではなく、CSSで調整するようにしましょう。

HTMLで改行する際には、brタグはバージョンによってタグが異なる点に注意する必要があります。

HTMLでは、<br>にスラッシュを加えた<br />を記述しても改行することができます。<br />は以前使用されていたXHTMLで改行する際に記述していたタグです。

現在主に使用されているHTML5でも<br />で改行することはできますが、<br>の使用が推奨されているため、<br />の仕様は避けるようにしましょう。

HTMLで改行する際には、brタグはデバイスが変わると表示崩れする場合があることを理解しておきましょう。

brタグを使用していない場合でも、ブラウザは幅に合わせて自動的に改行する仕組みになっています。一方、パソコンのブラウザに合わせてbrタグを使用すると、スマホで閲覧した際に表示が崩れてしまう場合があります。

【記述例】

brタグを使用していない場合でも、ブラウザは幅に合わせて自動的に改行する仕組みに<br>
なっています。一方、パソコンのブラウザに合わせてbrタグを使用すると、スマホで閲覧<br>
した際に表示が崩れてしまう場合があります。

▼パソコンのブラウザでの表示例

brタグを使用していない場合でも、ブラウザは幅に合わせて自動的に改行する仕組みになっています。一方、パソコンのブラウザに合わせてbrタグを使用すると、スマホで閲覧した際に表示が崩れてしまう場合があります。

▼スマホブラウザで表示崩れした例

brタグを使用していない場合でも、ブラウザは幅に合わせて自動的に改行する
仕組みになっています。一方、パソコンのブラウザに合わせてbrタグを使用すると、ス
マホで閲覧
した際に表示が崩れてしまう場合があります。

HTMLで改行する際には、行末にbrタグを記述しましょう。

HTML上で行頭にbrタグを記述すると、前の行に記述された文章の末尾がブラウザ上で右端に表示された際に、1行分のスペースが生まれてしまうケースがあります。

HTMLで改行する際には、レイアウト調整の目的では使わないようにしましょう。

文章と文章、あるいは文章と画像の間隔をpタグやbrタグで調整しようとすると、間隔が広くなりすぎたり、レイアウトが崩れてしまったりする恐れがあります。

ページデザインやレイアウト調整はCSSで行うようにしましょう。

今回は、HTMLで改行する際に使用するpタグ・brタグ・preタグの概要から、pタグとbrタグの違い、使用するタイミング、使用時の注意点について解説しました。

基本的に、文章を途中で改行する場合にはbrタグを使用します。pタグでも改行することは可能ですが、本来の目的とは異なる使用方法なので、改行する目的では使用しないようにしましょう。

また、pタグ・brタグの使い方が間違っていると、文章が読みにくくなったり、ページのレイアウトが崩れたりするかもしれません。この記事で紹介したpタグとbrタグの違い、使用するタイミングを確認し、読者にとって読みやすいページを作成しましょう。