brタグ -改行を挿入する|HTML辞典

<br>タグとは?

<br>タグは、HTML文書内で強制的に改行を挿入するためのタグです。
通常のテキストでは、スペースやEnterキーでは改行されず、<br>を使用することで意図的に改行を挿入できます。

基本情報

コンテンツモデル

フローコンテンツ(Flow Content)、フレージングコンテンツ(Phrasing Content)

インライン要素として扱われ、主にテキスト内で改行を入れる目的で使用されます。

閉じタグの有無

<br>は開始タグのみで閉じタグは不要な「空要素」です。
HTML5では <br>自己閉じタグ(<br />)を省略可能 ですが、XHTMLでは <br /> のように記述する必要があります。

基本的な記述方法

<br> を使用すると、テキストの途中で改行が入ります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>改行の例</title>
</head>
<body>
    <p>これは通常の段落です。</p>
    <p>これは<br>途中で改行が入る<br>テキストです。</p>
</body>
</html>

ポイント:

  • <br> は段落を分けるのではなく、テキストの中で改行を入れるために使用。
  • 文章全体の構造を整理する場合は <p> を使うのが適切。

使用できる主な属性

通常、<br> には特別な属性はありませんが、HTML5では classid を指定できます。

属性名説明
classCSSのクラスを適用<br class="spacer">
id一意の識別子を設定<br id="line-break">

<br> の適切な使用例

✅ 詩や住所の改行を入れる

詩や歌詞、住所の表記など、特定の位置で改行を明示的に指定したい場合に使用。

<p>山の上に<br>白い雲がかかる</p>

<p>東京都千代田区<br>○○ビル 3階</p>

<br> の適切でない使用例(誤った使い方)

❌ 段落の代わりに <br> を使うのはNG

<p> を使わずに <br> で文章を区切ると、可読性が低下し、SEOにも悪影響を与える可能性があります。

<!-- NG:<p> を使わず <br> で段落を作成 -->
これは1つ目の段落です。<br><br>
これは2つ目の段落です。<br><br>

✅ 正しい書き方(<p> を使用)

<p>これは1つ目の段落です。</p>
<p>これは2つ目の段落です。</p>

使用上の注意点

✅ 改行が必要な場面でのみ使用する

  • <br> は改行を挿入するためのタグであり、文章を分ける目的で使うべきではない。
  • 段落の分割には <p>、レイアウト調整にはCSSを使用するのが推奨される。

✅ 連続して使わない

  • <br><br> のように連続して使用するのは避けるべき。
  • スペースを作りたい場合は CSS の marginpadding を使用する。
p {
    margin-bottom: 20px;
}

✅ CSSで改行をコントロールできる場合は使わない

  • CSS の white-space: pre-line; を指定すると、HTML内の改行(改行コード)が反映されるため、 <br> を使わなくても改行が適用される。
p.poem {
    white-space: pre-line;
}

<p class="poem">
  山の上に
  白い雲がかかる
</p>

関連タグ

  • <p> – 段落を指定
  • <span> – インライン要素のグループ化
  • <div> – 汎用ブロック要素(レイアウト管理向け)
  • <hr> – 区切り線(水平線)を表示

まとめ

<br>タグは、テキスト内で特定の位置に改行を挿入するためのタグ です。
詩、歌詞、住所などの表記に適していますが、段落の分割やレイアウト調整には不適切な場合があるため、<p> や CSS を活用するのが望ましいです。
適切に使うことで、可読性を保ちつつ、意図したレイアウトを実現できます。