HTMLで改行する方法

HTMLで改行するには<br>タグを改行したい位置に書きます。ソースコード上で改行しても表示は変わらないため、brタグで明示するのが基本です。

HTMLの改行はbrタグ

表示上の改行を入れるには、改行したい位置に<br>と書くだけです。brはbreak(折り返し)の略で、テキストをその位置で折り返す働きだけを持つタグです。

ソースの改行は表示に反映されない

HTMLでは、ソースコード内の改行や連続した半角スペースは1つの半角スペースにまとめて扱われます。そのため、エディタ上でEnterキーで改行しても、ブラウザの表示は1行のままです。なお、まとめられた改行は、英単語の間では半角スペース1つとして表示され、日本語の文字の間では多くのブラウザで空白なしで詰めて表示されます(ブラウザにより扱いが異なります)。

次のコードで、ソースの改行が無視されることを確認できます。

<p>この行はソースで
改行していますが
1行で表示されます</p>

<p>この行は<br>brタグで<br>改行されます</p>

1つ目の段落は1行にまとまり、brタグを入れた2つ目の段落だけが3行に分かれて表示されます。

brタグの書き方・使い方

<br>を文中に入れて改行する

brタグは、改行したい位置に直接書き込みます。住所や連絡先のように、行の区切り自体に意味があるテキストに向いています。

<p>サンプル株式会社<br>
東京都千代田区1-2-3<br>
電話:03-1234-5678</p>

brの直後で折り返され、3行で表示されます。コード上の改行位置は表示に影響しないため、折り返しはbrの位置だけで決まります。

brに終了タグは不要

brは中身を持たない空要素(void要素)のため、</br>のような終了タグは書きません。XHTML由来の<br />という書き方も有効ですが、HTMLでは<br>だけで十分です。

改行タグを使うときの注意

brの多用より段落(p)で分ける

話題の区切りで行を変えたい場合は、brを連発するのではなく段落ごとに<p>タグで分けます。HTML Living Standardでも、brは住所や詩のように改行自体が内容の一部である場合に使うものとされています。

行間を広げる目的で<br><br>と重ねるのは避け、余白はCSSのmarginで調整します。空白行のあけ方は「HTMLで一行あける(空白行)方法」のページで説明しています。