HTMLのpタグとbrタグで改行する方法と使い分け方

この記事ではHTMLで改行をする方法をご紹介します。
HTMLで改行する方法は次の3つがあります。

• brタグを使う方法
• pタグを使う方法
• preタグを使う方法

どれも同じように改行をできますが、それぞれのタグが持つ意味が違うので用途に応じて使い分ける必要があります。

preタグで
改行する

それぞれのタグが持つ意味に応じて使い分ける方法や改行するサンプルコードをご紹介します。

HTMLを学ぶおすすめの方法や順序はこちらの記事で詳しく解説しています。

あわせて読みたい

HTMLをこれから学ぶ初心者のための学習ロードマップ HTMLの学習でつまづいたり、何から始めたらいいのか勉強方法がわからなくなったりしてHTMLの学習を難しく感じていませんか？そのように感じるのは学習する方法や順番が...

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

brタグとpタグとpreタグはそれぞれが持つ意味が異なります。
これらのタグを使い分けれるようにタグが持つ意味を理解しましょう。

brタグは「break」の略で、改行で使用します。
段落内でテキストを次の行に移すために使用します。

pタグは「paragraph」の略で「段落」を意味します。
そのため、pタグは段落を分けるために使用すめ文章は改行されます。

preタグは「Preformatted Text」の略で「整形済みテキスト」を意味します。
プログラミングのサンプルコードやアスキーアートのように改行やスペースなどをそのまま表示したいときに使用します。

改行するために使うタグは多くの場合brタグかpタグになります。
段落内で改行するときはbrタグ、段落を伴う改行の場合はpタグと使い分けましょう。

HTMLで改行する方法

HTMLで改行する方法は次の通り3通りあります。

• brタグを使って段落内で改行する
• pタグを使って段落分けして改行する
• preタグを使って改行をそのまま表示する

改行する目的に合わせて適切な改行方法を選択しましょう。
それぞれの使い方をご紹介します。

brタグを使って段落内で改行する

brタグで改行する場合は次のコードのように改行したい部分に<br>を挿入します。

brタグで<br>改行する

brタグは段落内での改行のため、多くの場合次のコードのようにpタグで囲まれた中で使います。

<p>
...
brタグで<br>改行する
...
</p>

また、brタグでも<br />を見ることがありますが、これはXHTML文法です。
<br>と<br />のどちらでも改行はされますが、HTML5では<br>が推奨されているので<br>を使うようにしましょう。

pタグを使って段落分けして改行する

1つ1つの段落を<p>~</p>で囲みます。次のコードのようにpタグで囲まれた段落ごとに改行されます。

<p>pタグで</p><p>改行する</p>

pタグはHTMLのブロック要素なので、上記のコードのように一行にpタグを複数書いても改行されます。

ブロック要素（Block-Level Elements）とは、冒頭でも説明した通り「行全体のまとまり」です。開始タグと終了タグで囲った箇所は行全体が１つのブロックとして扱われるため、範囲が横いっぱいに広がります。

【HTML】３分でわかる！インライン要素とブロック要素の違い

preタグを使って改行をそのまま表示する

<pre>~</pre>で囲んだ文章の改行や半角スペースは次のようにそのままブラウザに表示されます。

<pre>
preタグで
改行する
</pre>

preタグで
改行する

そのため、preタグ内ではbrタグで改行する必要はありません。

段落と行間のレイアウトを整える

<br>を複数入れることで次のように行間にスペースを入れることはできますが、<br>を連続で使用することは推奨されていません。

brタグで<br><br>改行する

<br>や<p></p>を使わずに段落や行間にスペースを入れる方法や幅を調整する方法などをご紹介します。

marginで段落の余白を調整する

段落ごとにスペースを入れたい場合はCSSのmarginを使うと段落にスペースを入れることができます。
次のサンプルコードはmarginを使って段落の下に50pxのスペースを入れています。

<p style="margin-bottom:50px;">pタグで</p>
<p>改行する</p>

すべての段落に同じ幅のスペースを入れたい場合は、次のようにスタイルシートでpタグに対して次のようにCSSを指定します。

p {
  margin-bottom:50px;
}

line-heightで行間の余白を調整する

文章の行間を調整したい場合はline-heightを使います。
次のサンプルコードではline-heightを使って行間を35pxに指定しています。

<p style="line-height:35px;">pタグで</p>
<p style="line-height:35px;">改行する。line-heightで行間の余白を調整する</p>

すべての文章の行間を同じ幅に調整したい場合は、次のようにスタイルシートでpタグに対してline-heightを指定します。

p {
  line-height:35px;
}

まとめ

この記事ではHTMLで改行をする次の3つの方法をご紹介しました。

• brタグを使う方法
• pタグを使う方法
• preタグを使う方法

どれも同じように改行をできますが、それぞれのタグが持つ意味が違うので用途に応じて使い分ける必要があります。

改行するために使うタグは多くの場合brタグかpタグになります。
段落内で改行するときはbrタグ、段落を伴う改行の場合はpタグと使い分けましょう。

brタグで改行する場合は、次のように改行したい位置に<br>を挿入します。

brタグで<br>改行する

pタグで段落を伴う改行の場合は、次のように段落ごとにpタグで囲みます。

<p>pタグで</p><p>改行する</p>