* [CODE(HTMLe)@en[br]] 要素型 (HTML, XHTML 1)

[1] [[HTML]] の [DFN[[CODE(HTMLe)@en[br]] 要素]]は、
[RUBYB[[[文]]] @en[text]]の現在の[[行]]を強制的に中断
(終了) させます。

[9]
仕様書:
- [[SI 4281]]:1998
<http://www.qsm.co.il/Hebrew/si4281e.htm>
-- [CSECTION@en[6.1.4 Elements with no directionality]]
- [[HTML 4]]
-- <IW:HTML4:"struct/text.html#edef-BR">

[2]
:状態:[[W3C]] [[勧告]]
:[[名前空間URI]]:[CODE(URI)@en[[[http://www.w3.org/1999/xhtml]]]]
:[[局所名]]:[CODE(HTMLe)@en[[[br]]]]
([Q@en[line ''br''eak]] ([Q[改行]]) より)
:[[開始タグ]]:必須
:[[終了タグ]]:禁止 ([[HTML 4]]), 必須 ([[XHTML 1]])
:[[内容模型]]:[[強制空要素]]型 ([CODE(SGML)@en[[[EMPTY]]]])
:出現できる文脈:[CODE(SGML)@en[%[[inline]]]] な文脈
:[[属性]]:
,属性名	,属性値	,既定値	,説明	,状態	,出典
,[CODE(HTMLa)[[[class]]]]	,	,	,[[級]]	,[HTML4] %[[coreattr]]
,[CODE(HTMLa)[[[clear]]]]	,	,	,流し込み制御	,[HTML4] 非推奨
,[CODE(HTMLa)[[[id]]]]	,	,	,一意識別子	,[HTML4] %coreattr
,[CODE(HTMLa)@en[[[soft]]]]	,	,	,	,非標準
,[CODE(HTMLa)[[[style]]]]	,	,	,スタイル情報	,[HTML4] %coreattr
,[CODE(HTMLa)[[[title]]]]	,	,	,注釈的題	,[HTML4] %coreattr


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

[[#comment]]


** 代替

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

[[#comment]]


** レンダリング

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

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

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

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

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

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

[[#comment]]


** 歴史

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

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

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

[7]
>>5 [CODE(HTMLe)[br]] 要素型の登場はもうちょっと遡れます。 [[www-talk]] で詩や住所のマークの仕方が話題にのぼりました。 [WEAK[(どこかで聞いたような話だ。)]] その話の中で、
''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+]] に [CODE(HTMLe)[br]] を追加した、と言っています。

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

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


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


[[#comment]]


** 実装

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

[2] >>1 でも [CODE(CSS)@en[\A]] == [CODE(charname)@en[[[LF]]]]
は[[改行]]だから。。。なんか変なの。

[[#comment]]


** 例

[18]
@@@@ 詩の例

cf. xhtml2:l

[17] '''欧米式住所表記の例'''
[SRC@en[[[HTML 5]] (Work in progress)]]
[PRE(HTML example code)[
<[CODE(HTMLe)@en[[[p]]]]>P. Sherman<[CODE(HTMLe)@en[[[br]]]] />
42 Wallaby Way<[CODE(HTMLe)@en[[[br]]]] />
Sydney</[CODE(HTMLe)@en[[[p]]]]>
]PRE]

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

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

[12] '''[[改段落]]に使った例'''
[PRE(HTML bad example code)[
愛の形も様々なれば、憎悪の形もまた様々なり。<[CODE(HTMLe)@en[br]] />
<[CODE(HTMLe)@en[br]] />
ひとたび愛深まれば、後の憎悪もまた深からん。
]PRE]

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

'''正しい段落境界の表現法の例'''
[PRE(HTML example code)[
<[CODE(HTMLe)@en[[[p]]]]>
愛の形も様々なれば、憎悪の形もまた様々なり。
</[CODE(HTMLe)@en[[[p]]]]>
<[CODE(HTMLe)@en[[[p]]]]>
ひとたび愛深まれば、後の憎悪もまた深からん。
</[CODE(HTMLe)@en[[[p]]]]>
]PRE]

[[スタイル・シート]]で
[PRE(CSS example code)[
[CODE(HTMLe)@en[[[p]]]] {
  [[margin-bottom]]: 1[[em]];
}
]PRE]

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

[15] '''類例''' [SRC@en[HTML 5 (Work in progress)]]
[PRE(HTML bad example code)[
<[CODE(HTMLe)@en[[[p]]]]><[CODE(HTMLe)@en[[[a]]]] [VAR[...]]>34 comments.</[CODE(HTMLe)@en[[[a]]]]><[CODE(HTMLe)@en[[[br]]]] />
<[CODE(HTMLe)@en[[[a]]]] [VAR[...]]>Add a comment.</[CODE(HTMLe)@en[[[a]]]]></[CODE(HTMLe)@en[[[p]]]]>
]PRE]

'''改善例 ([[HTML]])''' [SRC@en[HTML 5 (Work in progress)]]
[PRE(HTML example code)[
<[CODE(HTMLe)@en[[[p]]]]><[CODE(HTMLe)@en[[[a]]]] [VAR[...]]>34 comments.</[CODE(HTMLe)@en[[[a]]]]></[CODE(HTMLe)@en[[[p]]]]>
<[CODE(HTMLe)@en[[[p]]]]><[CODE(HTMLe)@en[[[a]]]] [VAR[...]]>Add a comment.</[CODE(HTMLe)@en[[[a]]]]></[CODE(HTMLe)@en[[[p]]]]>
]PRE]

'''改善例 ([[CSS]])'''
[PRE(CSS example code)[
[CODE(HTMLe)@en[[[p]]]] {
  [[margin-top]]: 0;
  [[margin-bottom]]: 0;
}
]PRE]

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

[16] '''類例''' [SRC@en[HTML 5 (Work in progress)]]
[PRE(HTML bad example code)[
<[CODE(HTMLe)@en[[[p]]]]>Name: <[CODE(HTMLe)@en[[[input]]]] [CODE(HTMLa)@en[[[name]]]]="name"><[CODE(HTMLe)@en[[[br]]]] />
Address: <[CODE(HTMLe)@en[[[input]]]] [CODE(HTMLa)@en[[[name]]]]="address"></[CODE(HTMLe)@en[[[p]]]]>
]PRE]

'''改善例 ([[HTML]])''' [SRC@en[HTML 5 (Work in progress)]]
[PRE(HTML example code)[
<[CODE(HTMLe)@en[[[p]]]]>Name: <[CODE(HTMLe)@en[[[input]]]] [CODE(HTMLa)@en[[[name]]]]="name"></[CODE(HTMLe)@en[[[p]]]]>
<[CODE(HTMLe)@en[[[p]]]]>Address: <[CODE(HTMLe)@en[[[input]]]] [CODE(HTMLa)@en[[[name]]]]="address"></[CODE(HTMLe)@en[[[p]]]]>
]PRE]

'''改善例 ([[CSS]])'''
[PRE(CSS example code)[
[CODE(HTMLe)@en[[[p]]]] {
  [[margin-top]]: 0;
  [[margin-bottom]]: 0;
}
]PRE]

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

[13]
'''[[余白]]のための大量の改行の例'''
[PRE(HTML bad example code)[
<[CODE(HTMLe)@en[[[h2]]]]>問題</[CODE(HTMLe)[[[h2]]]]>
<[CODE(HTMLe)@en[[[p]]]]>1 + 1 = ?</[CODE(HTMLe)@en[[[p]]]]>
<[CODE(HTMLe)@en[[[a]]]] [CODE(HTMLa)@en[[[href]]]]="[CODE(URI)@en[#answer]]">解答</[CODE(HTMLe)@en[[[a]]]]>
</[CODE(HTMLe)@en[[[p]]]]>
<[CODE(HTMLe)@en[[[br]]]] />
<[CODE(HTMLe)@en[[[br]]]] />
<[CODE(HTMLe)@en[[[br]]]] />
<[CODE(HTMLe)@en[[[br]]]] />
[INS[(中略)]]
<[CODE(HTMLe)@en[[[br]]]] />
<[CODE(HTMLe)@en[[[br]]]] />
<[CODE(HTMLe)@en[[[br]]]] />
<[CODE(HTMLe)@en[[[br]]]] />
<[CODE(HTMLe)@en[[[h2]]]] [CODE(HTMLa)@en[[[id]]]]="answer">解答</[CODE(HTMLe)[[[h2]]]]>
<[CODE(HTMLe)@en[[[p]]]]>田圃の<[CODE(HTMLe)@en[[[em]]]]>田</[CODE(HTMLe)@en[[[em]]]]>。</[CODE(HTMLe)@en[[[p]]]]>
]PRE]

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

'''良い例 ([[HTML]])'''
[PRE(HTML example code)[
<[CODE(HTMLe)@en[[[h2]]]]>問題</[CODE(HTMLe)[[[h2]]]]>
<[CODE(HTMLe)@en[[[p]]]]>1 + 1 = ?</[CODE(HTMLe)@en[[[p]]]]>
<[CODE(HTMLe)@en[[[a]]]] [CODE(HTMLa)@en[[[href]]]]="[CODE(URI)@en[#answer]]">解答</[CODE(HTMLe)@en[[[a]]]]>
</[CODE(HTMLe)@en[[[p]]]]>
<[CODE(HTMLe)@en[[[div]]]] [CODE(HTMLa)@en[[[id]]]]="answer">
<[CODE(HTMLe)@en[[[h2]]]]>解答</[CODE(HTMLe)[[[h2]]]]>
<[CODE(HTMLe)@en[[[p]]]]>田圃の<[CODE(HTMLe)@en[[[em]]]]>田</[CODE(HTMLe)@en[[[em]]]]>。</[CODE(HTMLe)@en[[[p]]]]>
</[CODE(HTMLe)@en[[[div]]]]>
]PRE]

'''良い例 ([[CSS]])'''
[PRE(CSS exampel code)[
[CODE(HTMLe)@en[[[div]]]]#answer {
  [[margin-top]]: 100[[em]];
}
]PRE]

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

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

[14]
'''鉤括弧前後の改行の例'''
[PRE(HTML bad example code)[
すると与作は、<[CODE(HTMLe)@en[[[br]]]] />
<[CODE(HTMLe)@en[[[q]]]]>んなら、おらは木を切りに行くべ。</[CODE(HTMLe)@en[[[q]]]]><[CODE(HTMLe)@en[[[br]]]] />
と言って立ち上がりました。すると婆様は、<[CODE(HTMLe)@en[[[br]]]] />
<[CODE(HTMLe)@en[[[q]]]]>待ちなされ、これを持ってお行きなさい。</[CODE(HTMLe)@en[[[q]]]]><[CODE(HTMLe)@en[[[br]]]] />
と言って小汚い布切れを差し出しました。
]PRE]

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

'''良い例 ([[HTML]])'''
[PRE(HTML example code)[
すると与作は、
<[CODE(HTMLe)@en[[[q]]]]>んなら、おらは木を切りに行くべ。</[CODE(HTMLe)@en[[[q]]]]>
と言って立ち上がりました。すると婆様は、
<[CODE(HTMLe)@en[[[q]]]]>待ちなされ、これを持ってお行きなさい。</[CODE(HTMLe)@en[[[q]]]]>
と言って小汚い布切れを差し出しました。
]PRE]

'''良い例 ([[CSS]])''':
[PRE(CSS example code)[
[CODE(HTMLe)@en[[[q]]]] {
  [[display]]: [[block]];
}
]PRE]

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

[[#comment]]


** メモ

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

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

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

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

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

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

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

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

[[#comment]]


* メモ