HTMLのbrタグ（改行）の正しい使い方と注意点

HTMLの<br>タグは、テキストの中で強制的に改行を挿入するためのインライン要素です。段落内の文章を任意の場所で折り返したい場合に使用します。

brタグの基本的な使い方

以下のように、改行したい位置に<br>を記述します。

<p>
The &lt;br&gt; tag <br>forces<br>line<br>breaks in text
</p>

このコードはブラウザ上で次のように表示されます。

The <br> tag
forces
line
breaks in text

<br>が挿入された位置で、テキストが強制的に改行されているのが分かります。

brタグを使う際に知っておきたいポイント

1. 要素間の余白を作る目的では使わない

開発者の間では、HTML要素同士の間隔を空けるために<br>を使っているケースをよく見かけますが、これは誤った使い方です。要素間のスペースを確保したい場合は、CSSのmarginプロパティを使用するのが正しい方法です。

2. 終了タグを持たない「空要素」である

<br>要素はいわゆる「空要素（empty element）」と呼ばれるもので、多くのHTML要素と異なり終了タグを持ちません。開始タグの<br>だけで完結します。

3. JSX（React）での書き方

ReactJSなどでJSXを使用する場合も、br要素は単一タグで定義されます。ただし、JSXでは有効な記述としてスラッシュ（/）が必要になる点に注意してください。

<br />

4. レスポンシブデザインでは慎重に使う

<br>による強制改行は、レスポンシブタイポグラフィにおいて意図しないレイアウト崩れを引き起こすことがあります。画面幅によってテキストの折り返し位置が変わるためです。そのため、どうしても必要な場合に限定して使用するのがおすすめです。テキストの整形には、カスタムCSSクラスを使う方が柔軟で保守性の高い代替手段となることが多いでしょう。