HTMLのbr要素を現役デザイナーが解説【初心者向け】

初心者向けにHTMLのbr要素について解説しています。これは文章内で改行を入れる際に利用されます。br要素の書き方と、使用する際の注意点について覚えておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

HTMLのbr要素について解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

br要素について詳しく説明していくね!

大石ゆかり

お願いします!

 

HTMLのbr要素とは

HTMLのbr要素は、文中に改行を生成する為に使用されます。市や住所など、行の分割が必要な場合に使います。終了タグはなく、

<br>

のみ記述します。

 

br要素で改行を入れる方法

br要素を使って改行を入れる場合、次のようにコーディングします。

<p>改行なし</p>
  <p>改行<br>あり</p>

改行を入れたい部分にbr要素を書きます。終了タグは必要ありません。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

br要素の使用上の注意点

br要素はお手軽に改行を差し込めるため、改行以外の目的で使用することは推奨されていません。例えば、行間を調整する為にbrタグを使用してもユーザーの環境によって大きく表示が変化する可能性があります。

また、改行目的で使用してもユーザーのフォントサイズによって、想定した改行にならないこともあります。そういった場合はline-heightやmarginを使用してcssで表示をコントロールする方が一般的です。

 

実際に書いてみよう

それでは実際に使ってみましょう。以下のコードを書いて、結果を確認してみましょう。

<p>
  Lorem ipsum dolor sit amet,<br>
  consectetuer adipiscing elit.<br>
  Aenean commodo ligula eget dolor.<br>
  Aenean massa. Cum sociis natoque<br>
  penatibus et magnis dis parturient montes,<br>
  nascetur ridiculus mus. Donec quam felis,<br>
</p>

出力結果は以下のようになります。

Lorem ipsum dolor sit amet,

consectetuer adipiscing elit.

Aenean commodo ligula eget dolor.

Aenean massa. Cum sociis natoque

penatibus et magnis dis parturient montes,

nascetur ridiculus mus. Donec quam felis,

以上で解説を終わります。

 

監修してくれたメンター

メンター金成さん

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。