HTML Living Standard/br

BR要素

  要素は、テキスト内で明示的な改行を表します。この要素は、新しい行を始める必要がある場合に使用されます。通常、段落やセクションの構造を変更せずに改行を行いたい場合に用いられます。

カテゴリ

フローコンテンツ
フレージングコンテンツ

使用される文脈

フレージングコンテンツが期待される場所

コンテンツモデル

空要素（他の内容を持つことはできません）

タグの省略

タグは省略できません。常に   を明示的に記述します。

コンテンツ属性

  要素はグローバル属性のみをサポートします。

アクセシビリティの考慮事項

  要素は、新しい行の開始を明示的に示すため、スクリーンリーダーで改行として認識されます。
長文や複雑なレイアウトの場合、  要素の乱用は避け、適切なセクション分割やCSSを使用してください。

使用例

基本的な改行の例

以下は、詩や住所のような内容で改行を行う例です。

<p>庭の千草<br>露に濡れて<br>秋風さむし<br>身にしみて</p>

住所のフォーマット例

以下は、住所を改行して表示する例です。

<address>
  123-4567<br>
  東京都新宿区<br>
  新宿1-2-3<br>
  山田ビル 101号室
</address>

フォームのレイアウト例

フォームの項目を縦に並べたい場合にも使用できます。

<label for="name">名前:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">メールアドレス:</label><br>
<input type="email" id="email" name="email">

CSSを使用した代替方法

デザイン上の理由で改行を行いたい場合は、CSSを使用することが推奨されます。

<p class="line-break-example">この行の後に<br>改行が入ります。</p>

CSS

.line-break-example br {
  display: block;
  margin-bottom: 1em;
}

注意事項

  要素は、文章の見た目を整えるためではなく、明示的な改行が必要な場面で使用してください。
段落やセクションを分ける必要がある場合は、 や適切なセクショニング要素を使用する方がセマンティクス的に正しい選択です。
過剰に使用すると、アクセシビリティやメンテナンス性が低下する可能性があるため注意してください。