意味

[8] HTML 4 DTD の注釈 (参考) には forced line break (強制改行) とあります。

代替

[11] 多くの場合、改行したいからといって br を使うのは不適切です。適切なマーク付けと CSS の組合せで素敵になれます。悪い例と改善例は例をご覧下さい。

レンダリング

[3] >>1 の通り、視覚UA では、強制的に改行されます。

bidi 算法の適用にあたっては、 LINE SEPARATOR 文字と同じように扱うべき (should) と HTML 4 は言っています。

[4] clear 属性 (非推奨) が使われているときは、 流し込みがその値に従って制御されます。 この機能は今ではスタイルシートを使うことになっています。 CSS なら clear 属性を使います。

[10] Bidi との関係: br 要素は、 bidi 的には単なる改行であって特に影響はありません。 SI 4281 6.1.4

[19] Evil Tests: Styling HR, BR Elements (Ian Hickson 著, 2007-02-11 22:22:02 +09:00 版) http://www.hixie.ch/tests/evil/mixed/hrbrstyles.html (名無しさん)

[20] Data.driven() - Marcos Caceres &#187; Blog Archive &#187; Secure Programming and the evil <br> element (2007-02-11 22:22:40 +09:00 版) http://www.datadriven.com.au/2007/02/08/secure-programming-and-the-evil-br-element/ (名無しさん 2007-02-11 13:25:01 +00:00)

br の誕生

[5] Dan Connolly の html.dtd に最初に br 要素型が定義されたのは 1.7.2.2 1994/04/01 20:30:17 で、属性無しの強制空要素でした。

(おそらく実装に合わせて) DTD に追加はしたものの、実体参照 &br; を定義して、それを使うべきだと (少なくても Dan は) 考えていた模様です。 (名無しさん)

[6] ちなみに、 nbsp が最初に定義されたのが少し前の 1.6 (HTML 1.0 I-D の版) です。こちらも、処理指令として定義しようと考えていたようです。

[7] >>5 br 要素型の登場はもうちょっと遡れます。 www-talk で詩や住所のマークの仕方が話題にのぼりました。 (どこかで聞いたような話だ。) その話の中で、 Re: RE two PREs <9306250423.AA12611@wintermute.ncsa.uiuc.edu> http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q2.messages/638.html (1993年6月24日) で、 Marc Andreessen が、新しい行を表すものがあればいい、と言いました。 これを受けて Dave Raggett が、 Re: RE two PREs <9306251045.AA14172@manuel.hpl.hp.com> http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q2.messages/641.html (1993年6月25日) で HTML+ に br を追加した、と言っています。

NCSA Mosaic に実装されたのがいつなのかは分かりません。

[31] Toward Closure on HTML (1994-04-07 09:56:59 +09:00 版) http://www.w3.org/People/Connolly/drafts/html-direction.html (名無しさん)

[32] Toward Closure on HTML (1994-04-07 09:56:59 +09:00 版) http://www.w3.org/People/Connolly/drafts/html-direction.html (名無しさん)

[33] EMail Msg <9308260107.AA23088@stat1.cc.ukans.edu> (2007-07-01 04:44:10 +09:00 版) http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q3.messages/774.html (名無しさん)

[34] >>7 での Marc の主張は、 pre は空白が重要という意味であって、 単に改行が重要であるという意味ではない (から別のものが必要) ということです。

[37] WWW-Talk Oct-Dec 1993: NCSA Mosaic for X 2.0 available (2007-12-31 00:22:27 +09:00 版) http://1997.webhistory.org/www.lists/www-talk.1993q4/0448.html

これによると、 br と hr は NCSA Mosaic 2.0 (1993年11月) で実装されたようです。

(名無しさん)

[38] >>5 Dan Connolly がタグより処理指令 (への実体参照) を使うべきだと言っている例 (1994年6月)。改行は構造的に重要ではない (から処理指令が適当) と述べています。

WWW-Talk Apr-Jun 1994: Re: Page breaks when you print formatted html docs http://1997.webhistory.org/www.lists/www-talk.1994q2/0792.html

(名無しさん)

[39] WWW-Talk Jul-Sep 1993: Lynx 2.0.11 now available! http://1997.webhistory.org/www.lists/www-talk.1993q3/0776.html

Lynx は 2.0.11 (1993年8月) から br を実装しているようです。 (名無しさん)

[40] 1993年7月の WWWWW で HTML 仕様 (HTML水準0) に追加することが正式に決まったようです。

(名無しさん)

[41] >>39 正式公開前に telnet で提供されていたとき (8月) のメモ: http://1997.webhistory.org/www.lists/www-talk.1993q3/0590.html

[207] 西暦1994(平成6)年時点の Emacs/W3 が br の実装で内部的に x や w3br というタグ状文字列を使っていました。 内部的なものですが、入力にそれが含まれていても同じように動作しそうに見えます。

DTBook

[175] HTML 由来で DTBook にもありました。 >>341

• [341] DAISY ANSI/NISO Z39.86-2002 - The DAISY Consortium, 2023-11-23T08:52:40.000Z https://daisy.org/info-help/document-archive/archived-projects/daisy-ansi-niso-z39-86-2002-archived/

XHTML2

[90] XHTML2 の最初の作業原案では line が導入され、 br は非推奨とされていました。

[91] 2つ目の作業原案では削除されていました。

[58] Re: br element should be eliminated, Masayasu Ishikawa, 2023-07-13T18:04:38.000Z, 2024-09-14T08:36:54.393Z https://lists.w3.org/Archives/Public/www-html/2002Sep/0066.html

実装

[1] WinIE 向け、 <br style="font-size:10px"/> のようにして改行幅を調整するらしい。何か間違っている気がする。 とはいうものの、 CSS 2 的には br 要素は br:after {content: "\A"} だから、 それで行の高さが変わるなら別にいいような気もする。

[2] >>1 でも \A == LF は改行だから。。。なんか変なの。

例

[18]

cf. xhtml2:l

[17] 欧米式住所表記の例 HTML 5 (Work in progress)

<p>P. Sherman<br />
42 Wallaby Way<br />
Sydney</p>

欧米で用いられている住所の表記法では適当な場所で改行されますから、 それを br で表しています。

ただし、このような改行を入れた例と 42 Wallaby Way, Sydney のような表記とで本質的な差があるかと言えば疑問です。 この場合の改行も単なる慣習的装飾に過ぎないとも考えられます。

[12] 改段落に使った例

愛の形も様々なれば、憎悪の形もまた様々なり。<br />
<br />
ひとたび愛深まれば、後の憎悪もまた深からん。

HTML には段落を表す p 要素型があります。この例は不適切で、 次の例のようにするのが正しい。

正しい段落境界の表現法の例

<p>
愛の形も様々なれば、憎悪の形もまた様々なり。
</p>
<p>
ひとたび愛深まれば、後の憎悪もまた深からん。
</p>

スタイル・シートで

p {
  margin-bottom: 1em;
}

としておけば、見た目上は悪い例と同じ効果が得られます。

[15] 類例 HTML 5 (Work in progress)

<p><a ...>34 comments.</a><br />
<a ...>Add a comment.</a></p>

改善例 (HTML) HTML 5 (Work in progress)

<p><a ...>34 comments.</a></p>
<p><a ...>Add a comment.</a></p>

改善例 (CSS)

p {
  margin-top: 0;
  margin-bottom: 0;
}

悪い例は、本来2つに分けるべきところを表示上余白なしで改行したいからと br を挟んで無理矢理1つの段落に詰め込んでいました。 改善例ではより素直に2つに分割し、 CSS で余白を無くして悪い例で著者が望んでいた表示結果が得られるようにしています。

[16] 類例 HTML 5 (Work in progress)

<p>Name: <input name="name"><br />
Address: <input name="address"></p>

改善例 (HTML) HTML 5 (Work in progress)

<p>Name: <input name="name"></p>
<p>Address: <input name="address"></p>

改善例 (CSS)

p {
  margin-top: 0;
  margin-bottom: 0;
}

この例でもフォームの入力欄の配置に関して >>15 と同じ問題に陥っています。やはり同じように2つに分けるという解決策を採ります。

[13] 余白のための大量の改行の例

<h2>問題</h2>
<p>1 + 1 = ?</p>
<a href="#answer">解答</a>
</p>
<br />
<br />
<br />
<br />
(中略)
<br />
<br />
<br />
<br />
<h2 id="answer">解答</h2>
<p>田圃の<em>田</em>。</p>

同じ頁内の別の部分にリンクしていますが、 その部分が同時に見えてしまわないように間に大量の強制改行を挟んでいます。

良い例 (HTML)

<h2>問題</h2>
<p>1 + 1 = ?</p>
<a href="#answer">解答</a>
</p>
<div id="answer">
<h2>解答</h2>
<p>田圃の<em>田</em>。</p>
</div>

良い例 (CSS)

div#answer {
  margin-top: 100em;
}

良い例の HTML と CSS を組合せれば同じ結果が得られます。 しかもこちらの方が遥かに簡単かつ論理的です。

もっともこの場合どちらの方法でも、 余白の大きさよりも表示領域の方が大きければ結局見えてしまいます。 (でも br を1万個入れるのは手作業だと気が遠くなりますし機械作業でもソースがかなりうざくなりますが、 CSS なら数字を書き換えるだけで済みます。)

[14] 鉤括弧前後の改行の例

すると与作は、<br />
<q>んなら、おらは木を切りに行くべ。</q><br />
と言って立ち上がりました。すると婆様は、<br />
<q>待ちなされ、これを持ってお行きなさい。</q><br />
と言って小汚い布切れを差し出しました。

日本語の文章の標準的な組版規則では会話を表す鉤括弧の前後では行を改めることになっています。 しかし雑誌や紙面に制限がある場面では一々改行されないこともあります。 改行の有無によって文章の意味が変わることはありません。 つまりその改行は本質的な文章の内容ではないのです。 (あるいは改行と鉤括弧の組合せが会話文を表すマーク付けと考えるのもまた良いでしょう。)

良い例 (HTML)

すると与作は、
<q>んなら、おらは木を切りに行くべ。</q>
と言って立ち上がりました。すると婆様は、
<q>待ちなされ、これを持ってお行きなさい。</q>
と言って小汚い布切れを差し出しました。

良い例 (CSS):

q {
  display: block;
}

HTML からは冗長な br 要素を全て剥ぎ取り、 代わりに CSS で q 要素の前後で必ず行が改まるようにします。

メモ

[21] html lecturte (2003-10-18 17:55:15 +09:00 版) http://www.padrac.ne.jp/~sugimoto/JIN/html/html.html#2-2

HTMLでは改行は、<br>(break line)です。

(名無しさん)

[22] >>21 が書かれたのは1995年12月らしい。 (名無しさん)

[23] 私はbr要素が好きじゃない : 雑記帳 : der Gegenwart (Rusica 著, 2007-04-29 11:23:15 +09:00 版) http://www.rusica.net/note/2007/04/28/br_1.html (名無しさん 2007-04-29 02:36:21 +00:00)

[24] カナかな団首領の自転車置き場 - br 要素 (2007-04-29 11:11:22 +09:00 版) http://d.hatena.ne.jp/kana-kana_ceo/20070428/1177733882 (名無しさん 2007-04-29 02:37:12 +00:00)

[25] カナかな団首領の自転車置き場 - 改行 (2007-04-29 11:11:22 +09:00 版) http://d.hatena.ne.jp/kana-kana_ceo/20070428/1177763721 (名無しさん 2007-04-29 02:38:03 +00:00)

[26] br 要素問題は CSS2.1 で解決か!? (2007-04-29 09:04:19 +09:00 版) http://deztec.jp/design/07/04/29_br.html (名無しさん 2007-04-29 02:39:03 +00:00)

[27] 意味のないbrはやめましょう:メモランダム (2007-04-30 04:35:59 +09:00 版) http://mynotes.jp/blog/2007/04/br_element (名無しさん 2007-04-30 01:36:46 +00:00)

[28] 我的春秋: hr要素は改名して、インライン要素とするのが活路かも (2007-04-30 10:36:41 +09:00 版) http://my-chunqiu.cocolog-nifty.com/blog/2007/04/hr_seperator_812f.html (名無しさん 2007-04-30 01:37:54 +00:00)

[29] 続・私はbr要素が好きじゃない : 雑記帳 : der Gegenwart (Rusica 著, 2007-05-02 11:00:42 +09:00 版) http://www.rusica.net/note/2007/05/01/br.html (名無しさん 2007-05-02 02:02:57 +00:00)

[30] 淡々と BR を使う - Weblog (2007-05-03 07:00:00 +09:00 版) http://ryus.s21.xrea.com/w/item/899 (名無しさん 2007-05-03 16:00:18 +00:00)

[42] Marcos Caceres' blog (2008-05-11 15:23:27 +09:00 版) http://datadriven.com.au/2007/02/13/secure-programming-and-the-evil-element/

[87] SMIL 3.0 smilText (2008-12-02 00:45:09 +09:00 版) http://www.w3.org/TR/2008/REC-SMIL3-20081201/smil-text.html#edef-br

[88] SVG には tbreak 要素があります。