<br>: 改行要素

試してみましょう

<p>
  O’er all the hilltops<br />
  Is quiet now,<br />
  In all the treetops<br />
  Hearest thou<br />
  Hardly a breath;<br />
  The birds are asleep in the trees:<br />
  Wait, soon like these<br />
  Thou too shalt rest.
</p>

p {
  font-size: 1rem;
  font-family: sans-serif;
  margin: 20px;
}

上記の例に見られるように、 <br> 要素はテキストを改行したい場所にそれぞれ含められます。 <br> の後のテキストは、テキストブロックの次の行の先頭から再開されます。

属性

この要素にはグローバル属性があります。

非推奨の属性

clear 非推奨;

改行後の次の行を開始する場所を示します。

CSS でのスタイル付け

<br> 要素は、テキストのブロック内で改行するという、単一の明確な目的を持っています。そのため、寸法を持たず、自身が表示されることもなく、スタイル付けすることができるのはわずかです。

margin を <br> 要素自体に設定して、ブロック内のテキストの行間を開けることができますが、これは良いやり方ではありません。 — この用途のために設計された line-height プロパティを使用してください。

アクセシビリティ

段落間の間隔を広げるために連続した <br> 要素を使用することは、読み上げ技術の支援の下で操作をしている人にとっては問題になります。読み上げソフトは要素が存在することをアナウンスするものの、その中にはコンテンツが何もないという状況になる可能性があります。これは読み上げソフトを使用している人の利用を混乱させ不満をためる可能性があります。

追加の間隔をあける必要がある場合は、 margin のような CSS プロパティを使用して効果を得るようにしてください。

例

基本的な br

以下の例では <br> を使用して、住所のそれぞれの行の間に改行を生成しています。

Mozilla<br />
331 E. Evelyn Avenue<br />
Mountain View, CA<br />
94041<br />
USA<br />

以下のように出力されます。

技術的概要

仕様書

ブラウザーの互換性

関連情報

• <address> 要素
• <p> 要素
• <wbr> 要素