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では class
や id
を指定できます。
属性名 | 説明 | 例 |
---|---|---|
class | CSSのクラスを適用 | <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 の
margin
やpadding
を使用する。
p {
margin-bottom: 20px;
}
CSSで改行をコントロールできる場合は使わない
- CSS の
white-space: pre-line;
を指定すると、HTML内の改行(改行コード)が反映されるため、<br>
を使わなくても改行が適用される。
p.poem {
white-space: pre-line;
}
<p class="poem">
山の上に
白い雲がかかる
</p>
関連タグ
まとめ
<br>タグは、テキスト内で特定の位置に改行を挿入するためのタグ です。
詩、歌詞、住所などの表記に適していますが、段落の分割やレイアウト調整には不適切な場合があるため、<p>
や CSS を活用するのが望ましいです。
適切に使うことで、可読性を保ちつつ、意図したレイアウトを実現できます。