[1] HTML の br
要素は、
文の現在の行を強制的に中断
(終了) させます。
[9] 仕様書:
http://www.w3.org/1999/xhtml
br
(line break
(改行) より)
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 » Blog Archive » 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]
時点の Emacs/W3 が br
の実装で内部的に x
や w3br
というタグ状文字列を使っていました。
内部的なものですが、入力にそれが含まれていても同じように動作しそうに見えます。
[175] HTML 由来で DTBook にもありました。 >>341
[90] XHTML2 の最初の作業原案では line
が導入され、
br
は非推奨とされていました。
[58] Re: br element should be eliminated, Masayasu Ishikawa, , 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"}
cf. xhtml2:l
[17] 欧米式住所表記の例 HTML 5 (Work in progress)
<p
>P. Sherman<br
/> 42 Wallaby Way<br
/> Sydney</p
>
欧米で用いられている住所の表記法では適当な場所で改行されますから、
それを br
で表しています。
ただし、このような改行を入れた例と
42 Wallaby Way, Sydney
のような表記とで本質的な差があるかと言えば疑問です。
この場合の改行も単なる慣習的装飾に過ぎないとも考えられます。
愛の形も様々なれば、憎悪の形もまた様々なり。<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つに分けるという解決策を採ります。
<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;
}
[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
br
要素 type
属性 (HTML)[86]
Gecko は designMode
で編集部分の最後に挿入した br
に type
属性で値を _moz
と指定します。
(名無しさん 2007-10-17 01:08:08 +00:00)
br
要素 (コーパス)[1] コーパスのタグセットで
br
要素が使われることがあります。
[55] Playing HTML TADS Games with the Character-Mode Interpreter, , https://www.tads.org/t3doc/doc/htmltads/charmode.htm
[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
2007-12-31 00:40:11 +09:00
版) http://1997.webhistory.org/www.lists/www-talk.1993q3/0461.html