【HTML】brタグを使ってテキストを途中で改行する!

HTMLにはbrタグというテキストを途中で改行するタグがあります。

紙媒体の文章やWebページでも同じですが、下記の二つの写真でどちらの文章が見やすいでしょうか?

A

B

明らかにBの文章の方が見やすいと思います。

つまり、改行は文章を書く上で必要であり、改行をすることで、ユーザーにとって読みやすく、分かりやすい文章を作成することができます。
また、わかりやすくて見やすい文章を書くことは、ユーザーの滞在時間を延ばす要因でもあるので文章が長くな理、横に長くなってしまった場合は改行を使用しましょう。

今回は、HTMLのbrタグを使ってテキストを途中で改行する方法について解説していきます。

brタグとは

brタグとはコンテンツのテキストを途中で改行するタグとなります。
また、brタグのbrとは「line break」の略となります。

brタグの書き方

brタグの書き方は下記となります。

テキストの改行させたい位置にbrタグを記述することで、テキストの途中で改行して表示されるようになります。
この要素は特定の範囲を囲う必要はなく、開始タグのみで使用します。

brタグの注意点

brタグは文章や詩、住所の表記などのように、改行がコンテンツの一部である時のみ使用してください。

また、余白はCSSで設定するのでbrタグを連続で使用し、余白を作るのは避けましょう。

テキストを途中で改行するサンプルコード

テキストを途中で改行するサンプルコードについて紹介します。

sample.html

出力結果

brタグによってテキストの途中で改行されています。

コンテンツとしての改行と余白の違い

HTMLファイルにいくら改行を入れても、ブラウザで表示すると、改行された状態では表示はされません。
改行を入れるには今回紹介しているbrタグか、ブロックレベルのタグで囲む必要があります。

見出しや段落などの前後の改行はh1タグやpタグなどをつけることで自動的に改行されます。
なぜなら、異なるボックスに入ったことから改行された状態になるからです。

また、余白を作ったり画面のレイアウトとしてbrタグを使用するのは、適切な方法ではありません。
要素間の余白や画面のレイアウトを調整する場合はCSSのpaddingやmarginで調整する必要があります。

よくない例

sample.html

style.css

出力結果

見た目はいい感じですが、pタグと、input typeタグの間にbrタグをつけたり、brタグを二回以上の連続として記述されている為、要素間余白や画面のレイアウトの調整が目的になっていることが考えられるためNGです。

よい例

sample.html

style.css

出力結果

要素間を改行せずに、CSSのプロパティで余白をつくっています。

今回のポイント

brタグで文章を途中で改行

⚫︎ HTMLでテキストを途中で改行するにはbrタグを使用する

⚫︎ brタグの注意点として改行がコンテンツの一部である場合のみ使用する

⚫︎ brタグを使って余白を作ったり画面のレイアウトとして使用するのは、適切な方法ではない

⚫︎ 要素間の余白や画面のレイアウトを調整する場合はCSSのpaddingmarginで調整する

関連記事

paddingで要素の内側の余白を作成する方法についてはこちらをご参考ください。

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し