HTMLで改行を入れるには<br>を使います。
ちなみに、<br>はBreakの略でして、ブレーク、つまり改行という、そのままの意味ですね。
書き方自体は簡単なタグなのですが、使い方には少々注意すべきポイントがあります。
本記事で<br>についてゼロから解説するので、HTML初心者の人はもちろん、正しい改行の仕方を知りたい人はぜひ参考にしてみてください。
スポンサードサーチ
本記事のもくじ
【brタグとは】基本的な使い方
<br>とは改行を挿入するときに使うHTMLタグです。
<p>brタグを入れた部分は、<br>
このように、<br>
改行されます。</p>ブラウザでの見え方
brタグを入れた部分は、
このように、
改行されます。
こんな感じで、<br>を入れたところが改行される仕組みになっています。
終了タグはありません。
brタグを使う場面
実を言うと、<br>を使う機会はそれほど多くありません。
HTMLでは基本的に、それぞれのまとまりの前後に改行が入ります。
ブロックレベル要素を作るタグで囲った要素は前後で改行されるので、<br>を使わなくても改行は作れるんですね。
<p>pタグで一つの段落を作ります。</p>
<p>pタグを分けて、二つ目の段落を作ります。</p>ブラウザでの見え方
pタグで一つの段落を作ります。
pタグを分けて、二つ目の段落を作ります。
このように、文章の途中に改行を入れたければ、<p>で囲みなおせばOKです。
ブロックレベル要素のHTMLタグ
pタグ、h1〜h6タグ、tableタグ、divタグ…など。
brタグはどこで使うの？
じゃあ、どこで<br>を使うのか？という話になってきますね。
<br>を使う場面として適切なのは、“内容が同格なので段落分けすべきじゃない場所（けど改行したほうが見やすい場所）”です。
例えば、下記のような場所ですね。
- 企業情報：会社名・住所・電話番号などで改行する
- 自己紹介：名前・経歴などで改行する
会社情報を<br>を使いつつ書いてみましょう。
<p>株式会社あいうえお<br>
東京都港区品川1-2-3<br>
03-1234-5678<br>
contact@aiueo.com</p>
<br>を使います。
スポンサードサーチ
brタグ使用上の注意点とは
<br>を使う際に注意したいポイントをまとめました。
使いすぎないこと
<br>を使って改行するのは良いのですが、使いすぎると変なところで改行が入ってしまい、読みにくい文章になってしまいます。
特にPCとスマホでは画面のサイズも違うので、PCでは問題なく見えていても、スマホだと改行位置が中途半端な位置になってしまうことがあります。
<p>田子の浦に<br>
うち出でて見れば白妙の<br>
富士の高嶺に<br>
雪は降りつつ<br>
</p>PCでの見え方
スマホでの見え方
改行したければ<p>で段落分けしよう
ウェブサイトは常に同じ画面サイズで表示されるわけではありません。
ユーザーが使っているデバイスも違えば、ブラウザも違うので、その点は忘れないようにしましょう。
改行したければ<p>で囲みつつ、無駄な部分で改行が入らないように段落分けするように心がけておくと良いと思います。
デザイン目的でbrタグを使わない
デザイン上の見た目を整えたいからという理由で<br>でスペースを作るのはNGです。
例えば、見出しと本文のスペースを少し広げる目的で改行するみたいな感じですね。
<h2>自己紹介</h2>
<br>
<p>僕は1989年に生まれました。平成元年生まれのアラサーです。</p>
このようにすれば、確かにスペースは作れますが、HTML書き方のルールからすればNGです。
<br>でレイアウトを整えても、ユーザーの環境によって行間などが変わってしまう可能性があるからです。
スペースを作りたければ、CSSのマージン（margin）を使いましょう。
brタグにスラッシュは付けないこと
たまに<br />という形で、スラッシュがついた<br>を書いている人を見かけます。
<br />はXHTMLという言語の改行の仕方でして、厳密に言えばHTMLとは異なるのでこの書き方はNGです。
HTMLでの改行はスラッシュなしの<br>だけなので、気をつけましょう。
スポンサードサーチ
まとめ：brはあまり使わないほうが良い
本記事では、HTMLで改行をする方法（brタグ）をまとめました。
とはいえ、<br>は必要以上に使用せず、<p>などで段落分けするか、スペースを作りたければCSSでカスタマイズするほうが理想的です。
必要なときに使うためだけのタグであることを意識しつつ、HTMLコードをきれいに保ちましょう。
おわり。
