<br>タグの解説
<br>は、文章の中で改行させたい箇所を指定します。正確な言い方をすると、文中に改行（キャリッジリターン）を生成します。同一セクションの中で段落を終わらせずに改行を加えたい箇所に適しています。例えば、住所の記載や歌詞の引用などです。
文章の見た目を整える目的で連続して改行したり、段落を変えるような感覚でこのタグを使うことは推奨しません。視覚的な調整は、できるだけCSS（スタイルシート）で行い、<br>は意味的に矛盾のない改行に用いるべきです。
改行に関する特徴や振る舞いは、「HTMLで改行や半角スペースを表示させる方法」で解説しています。強制的な改行は行わずに改行可能な位置を示したい場合は<wbr>を使用します。
<br>タグの特徴
- レイアウトの初期値はインライン要素ですが、文章の改行に影響を与えます。
- この要素は空要素です。開始タグのあとに終了タグを記述する必要はありません。
<br>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<br>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。<br>に続くテキストは、一行改行されてインライン方向の先頭に配置されます。
text<br>text.
XMLやXHTMLを考慮すべき環境ではタグの内部にスラッシュを加えます。<br>は終了タグを持たない空要素であるため、自己完結型の表記にします。
text<br />text.
同一の要素内での改行
<br>は、基本的に同一のセクション内で改行が必要な箇所に配置します。以下の例は、視覚的に連絡先の分類を分かりやすくする効果があります。
<address>
ご意見ご感想は下記にお寄せ下さい。<br>
Mail: mail@exsample.com<br>
Tel :000-0000-0000<br>
</address>
改行を連続で書く行為は非推奨
行間を広げるためだけの目的で<br>を連続で記述してはいけません。段落の中に収まる内容は一行にまとめて、行間は段落で表現する方が望ましいでしょう。以下の例は、あまり推奨できない書き方です。
<p>
ブログやウェブ小説を書く際に改行を乱用しがちです。<br>
<br><br>
ブログやウェブ小説を書く際に改行を乱用しがちです。<br>
<br><br>
ブログやウェブ小説を書く際に改行を乱用しがちです。<br>
</p>
行間と空白はCSSで調整する
どうしても見た目上の空白が必要な箇所は、スタイルシートで調整して下さい。<br>はソースコードの分量を増やしてしまうので、一括管理を行う意味でも有用です。
<div class="sample-block">
<p>段落は改行せずに連続させます。行間やマージンはスタイルシートで整えます。</p>
<p>段落は改行せずに連続させます。行間やマージンはスタイルシートで整えます。</p>
<p>段落は改行せずに連続させます。行間やマージンはスタイルシートで整えます。</p>
</div>
.sample-block p {
margin-block: 1rem 0;
line-height: 1.5;
}
上記のように、line-heightプロパティとmarginプロパティを使って行間と空白を調整することができます。
連続した改行を意図的に使う方法
一方で、大胆に改行を加えて文章の可読性を増したり、緊張感や時間の経過を空白で表したい場合もあります。そこで、ひとつの解決策として改行を「間」という意味に置き換え、文脈上の意味のある要素として扱う方法を紹介します。
この方法は、書き手に明確な意図がある場合に限り有効な手段となり得ます。小説や対話型のコンテンツなどであれば、意図的に空けた空間も段落として扱えるからです。ただし、純粋にデザインやレイアウトの都合で隙間を空けたい箇所は、やはりCSSで個別に調整すべきです。
<p>「文章の中で〝間〟を表現するために空の段落を用意します」</p>
<p>「セリフの前後に隙間があると読みやすい場合もあるよね」</p>
<p class="blank"> </p>
<p class="blank"> </p>
<p>「もしこの後なにかが起こるとしたら――」</p>
<p class="blank"> </p>
<p class="blank"> </p>
<p>「びっくりさせないでよ」</p>
<p>「緊張感を与えるために空けた行間も意味を持ちます」</p>