br

br 要素 (HTML)

[1] HTMLbr 要素は、 (text) の現在のを強制的に中断 (終了) させます。

[9] 仕様書:

[2]

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

意味

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

不思議解釈

[89] Strictor系過激派の中には、 「br」は「小休止」の意味であるなどと曲解して br物理要素ではないと主張する人もいます。

代替

[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)

歴史

[5] Dan Connollyhtml.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

これによると、 brhrNCSA 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月の WWWWWHTML 仕様 (HTML水準0) に追加することが正式に決まったようです。

(名無しさん)

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

DTBook

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

XHTML2

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

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

実装

[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;
}

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

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

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

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

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

良い例 (HTML)

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

良い例 (CSS):

q {
  display: block;
}

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

メモ

[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 ( 版) http://datadriven.com.au/2007/02/13/secure-programming-and-the-evil-element/

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

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

br 要素 type 属性 (HTML)

[86] GeckodesignMode で編集部分の最後に挿入した brtype 属性で値を _moz と指定します。 (名無しさん 2007-10-17 01:08:08 +00:00)

br 要素 (コーパス)

[1] コーパスのタグセットbr 要素が使われることがあります。

[51] br 要素論理改行を表します。 >>50 #page=22

[53] br 要素空要素です。

[52] 改頁改段と対になった改行を表す lb 要素がありますが、 それとは別に br があります。

メモ

[92] IRC logs: freenode / #whatwg / 20090916 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20090916#l-116

[93] Web Applications 1.0 r5670 Update <br>'s bidi behavior to match WebKit and IE rather than Gecko and Opera.Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=10828 ( ( 版)) http://html5.org/tools/web-apps-tracker?from=5669&to=5670

[94] [whatwg] [br] element should not be a line break ( ( 版)) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2010-December/029351.html

[95] 【続・誤植】Adobeの提案する新しい<br>の世界が酷すぎて泣ける。 » KLOG-クロッグ- ( ( 版)) http://post.logown.com/2012/06/1270/

[96] [whatwg] HTML spec incorrectly suggests that <br> can have its rendering changed with CSS ( ( 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2014-January/041908.html

[97] ncsa-mosaic/CHANGES at master · alandipert/ncsa-mosaic ( ( 版)) https://github.com/alandipert/ncsa-mosaic/blob/master/CHANGES#L698

[98] [whatwg] HTML spec incorrectly suggests that <br> can have its rendering changed with CSS ( ( 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2014-April/254177.html

[99] [css-display] Explaining <br> ( (Tab Atkins Jr. 著, 版)) http://lists.w3.org/Archives/Public/www-style/2014Jun/0155.html

[100] Web Applications 1.0 r8745 Update how 'br' is specced at the CSS level. This depends on as-yet incomplete CSS changes. ( ( 版)) http://html5.org/r/8745

[35] Re: [css-display] Explaining <br> (Tab Atkins Jr. 著, 版) https://lists.w3.org/Archives/Public/www-style/2016Mar/0367.html

[36] Re: [css-display] Explaining <br> (fantasai著, ) https://lists.w3.org/Archives/Public/www-style/2017Feb/0065.html

[43] 改行<br>を複数連続しない方がいい理由【そんなHTMLで大丈夫か?#1】 - ペパボテックブログ () http://tech.pepabo.com/2017/06/22/html-markup-tips-01/

[44] MSAA+IA2 mappings for <br> / issue #118 (jasonkiss著, ) https://github.com/w3c/html-aam/commit/d4a1976b1804e4c23b5680185c5bd5e7ce74e42b

[45] Sanity check: Should 'br' really be mapped in MSAA+IA2? · Issue #118 · w3c/html-aam () https://github.com/w3c/html-aam/issues/118

[46] MSAA+IA2 mappings for <br> / issue #118 (jasonkiss著, ) https://github.com/w3c/html-aam/commit/d4a1976b1804e4c23b5680185c5bd5e7ce74e42b

[47] Sanity check: Should 'br' really be mapped in MSAA+IA2? · Issue #118 · w3c/html-aam () https://github.com/w3c/html-aam/issues/118

[48] 報道発表資料:車検証を電子へ!<br>~電子車検証の仕様に関する検討結果について~ - 国土交通省 (, ) https://www.mlit.go.jp/report/press/jidosha08_hh_003912.html