代替

[65] 以前は hr は水平線を引くための要素でした。

現在では単に水平線を引くために hr を使うのは不適切と考えられています。

[66] CSS の border 系の特性を使うと、 任意の要素の周りに線を引くことができます。 線種など hr より細かい指定が可能です。

文脈と分類

[67] hr はブロック水準要素であり、 ブロック水準要素が認められている場所で使うことができます。 HTML 5

[68] HTML 2 では hr は body の子供など %body.content; として、あるいは pre の子供として使えるとされていました。 なぜ pre 内で認められていたのかはよくわかりません。

[69] HTML 3.2 では hr はブロック水準要素に分類されました。 HTML 3.2、 HTML 4、ISO-HTML の DTD では引数実体 %block; に含まれていました。

[1] WinIE 3.0 では hr 要素は p 要素の子要素になることができます: ブラウザーによって振る舞いの異なるタグ : 他にもありますか? http://tohoho.wakusei.ne.jp/lng/199801/98012000.htm

[2] 昔の FrontPage で「水平線」を引くと、 <P><HR></P> が挿入されましたね、たしか。

[3] >>2 手動で <p> を削除してもわざわざ直してくれるのね、親切にも。

[6] 何だったか忘れましたけど、 FrontPage 以外の WYSIWYG な HTML editor でも <P><HR></P> なのがありました。どう考えてもおかしいのに、 なぜこんなのが広まったのかな?

お尻 p 的に <P><HR><P> ならまだ分かるのだけど。。。 (そしてこれも実際よく使われていたけど。。。)

[70] XHTML m12n では表現モジュールのブロック表現モジュールの一部として定義されていました。 内容集合としてはブロックに含まれていました。 DTD実装では %Block.class; に含まれる %BlkPres.class; に含まれていました。

レンダリング

[19] hr 要素は、 横幅一杯に罫線か等価な図形を表示します RFC 1866 5.9。

[12] hr 要素の水平線とその前後のものとの間の余白の量は UA 依存です HTML 4 15.3。

[21] 音声 UA では、 hr は「間」としてレンダリングできます HTML 3.2 hr。

不思議解釈

[30] えいちてぃーえむえる (池田賢元著、2002年9月付け) http://www.analogmonkey.com/tutorial/premier_2.html

このタグ講座によると、 hr はシングル・タグで Horizontal Reference の略だそうです。一体何を参照するのでしょう?

[31]

You probably already know that you can place a line simply by typing <HR> on the page. "HR" stands for horizontal reference, by the way. It makes a nice line with a little bit of shading all the way across the screen. Plus it needs no end command. And it's centered. Coolness.

訳の分からないことを書き連ねて何が cool だ。

So, You Want An HR Line, Huh? (Joe Burns 著、2005年7月現在) http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479441#the

[32] >>31 日付が無いのでいつの記事かわかりませんが、同じシリーズで multicol が紹介されていますから、 90年代後半のものでしょうか。

[33] Greater Great Kato (Ka Koijong 著、2001年12月付け) http://www.geocities.com/quantumkato/html/html_basic.html

<hr>

horizontal row

[34]

Horizontal Reference

<hr>

Vintage Computer Auction Forum > HTML Tags (ave13co.com 著、2005年1月付け Google キャッシュ、 2005年7月現在元サイト消滅) http://www.google.com/search?q=cache:kWaImnk_3dIJ:ave13co.com/cgi-bin/vintage_computer_auction.pl%3Faction%3Dforum%26task%3Dhtmltags

[35]

<hr>: Stands for horizontal reference. What's a horizontal reference? Well, this is a horizontal reference:

(hr の実例)

See?

:: Aethereality.net :: Version 3.1.1 :: Vintage Reminiscence :: (Crystal 著、2003年8月付け、2005年1月付け Google キャッシュ、 2005年7月現在元サイトの記事消滅) http://www.google.com/search?q=cache:Av_r3_XRIWQJ:aethereality.net/tutorials/read.php%3Fid%3D2

文書の情報のところに著者のレベルは初級者と書いてあるが、 なんでそんな奴がチュートリアルを書くのだ?

[36]

<hr /> The Horizontal Reference or HR tag simply puts a line accross the screen. It's like the BR tag but instead of space it inserts a horizontal line that can be changed with attributes.

Computers : Day One (trevor 著、2005年1月付け) http://128.32.250.47:8080/calles/2005/01/07

[37]

hr stands for Horizontal Reference.

Flags & Structure- HTML Tutorials- Depiction (Matt 著、2005年7月現在) http://www.depiction.net/?id=htmlflagsandstructure

この文書では flag, command, tag が同じ意味で使われています。 flag が一番著者のお気に入りのようで。 (もちろんは不思議マーク付けの世界におけるタグの意味で。)

[38]

Web Host Galaxy - Cheap, Reliable web hosting - php, MySQL (Web Host Galaxy.com 著、 2005年4月付け、 実際には2004年か?) http://www.webhostgalaxy.com/cpanelxp2004/learning-pages/basic-html1.htm

>>30 と同じ内容。 >>30 が日本語として怪しいところを見ると英語のこっちが原文だな。 (>>30 の著者は米国で育って今は日本の大学にいるらしい。)

(HR stands for Horizontal Reference.) The line right above the words "Single tags" was made using an <HR> tag.

と怪しいシングル・タグもちゃんとあります(w

比べてみると英語で

<B>Joe</B>

なのが日本語では

<B>明日のジョー</B>

になってたりしてなんか藁える。

しかし日付的に英語の方が日本語のより新しいなあと思ったら、 他にもありましたよ。

Free Backgrounds I page 1 & Learning HTML for Web Developers, Basic HTML http://www.animation-station.com/backgrounds/ (日付不詳だが Internet Archive によれば2005年になってからか?)

[39] Basic HTML: Primer #2--Flags (Joe Burns 著、1999年2月付け) http://www.st-andrews.com/Courses/IT/Intranet/gen/tutorial/primer_2.html

これも >>38 と同じ内容だけど、 tag の代わりに flag という言葉が使われている。 ってそれどこかで聞いたな。 >>37 か。 >>37 の一部と書いてあることが完全に一致するよwwwwwwww それにこの著者どっかで見たことが・・・ >>31 だ。うほっ。

<HR>

This command gives you a line across the page. (HR stands for Horizontal Reference) The line right above the words "Single Flags" was made using an <HR> flag.

シングル・タグの tag も元は flag だったのですなwwwwwwwww

[40] isphost.org (Joe Burns 著、2003年7月付け) http://web.archive.org/web/20030808130619/http://www.isphost.org/htmlhelp2.html

>>38 と同じ内容 (tag になってる方。) Joe が寄稿したものらしい。

[41] >>30 のサイトのタグ講座は全部 >>39 のサイト

Computer Dept Intranet http://www.st-andrews.com/Courses/IT/Intranet/gen/tools.html

の翻訳のようです (>>30 の方ではメニューだけで内容未公開のものも含めてwwww)。

[42] Beginning HTML (2002年付け) http://teachertech.rice.edu/Materials/GT2001/Aldine/intro.html

>>39 の冒頭と同じことが書いてある。そしてこれと同じサイトのリンク集の頁には >>31 のサイトへのリンクがある。つまり Joe と関係があるということだ。 (パクったのか許諾を得ているのか引用程度だから問題ないと思ったのか実は Joe 自身が関わっているのかはしらん。)

[43] ACENET Knowledge Base > Introduction to HTML http://ace-host.net/kb/article.php?id=059 (Pineapple Technologies 著、2003年付け)

>>38 と同じ内容

[44] Basic HTML:2--Flags (2003年9月付け) http://www.kean.edu/~gkolodiy/5223/c21.htm

HTML Goodies (Joe Burns 著www) を使った大学の講義らしい。そんな本教科書にすんなよ。 というか Joe は flag なんて言葉を使って本まで書いてたのかよ!

この文書自体は >>39 と同じですが、なぜか著者名が欠けています。 Joe が使っていいよと言っているのか、それとも勝手にパクって著者名だけ削ったのかww

[45] The Airrington Blog (2004年付け) http://forum.wr.ca/view_topic.php?id=1693&tp=14562&offset=0

>>39 と同じ書き出しで始まる文書。

[46] まだまだあるけど面倒になってきた。。。 IW:Google:"\"HTML works in a very simple, very logical, format. It reads like you do, top to bottom, \"" で検索するとずるずる出てきますよw

例文に Joe とか出てくることからしても、 最初の出発点は Joe Burns なのでしょう。 そして horizontal reference 説の出所もおそらくは Joe Burns だ、と。教科書まで出版して布教しているんだから大したもんです。 (でもそれにしてはあんまり普及しているとは言えないな。) 日本に紹介した池田賢元氏の業績wwも評価しなければなりますまいwwwwwwwww

[47] 64bits.se :: Visa tr&#229;den - HTML | Den absoluta b&#246;rjan (2003年4月付け) http://www.64bits.se/forum/viewtopic.php?t=17775&sid=17086c1a1fc9903da572c40ce3728fd7#170973

<HR>-taggen:

<HR> (Horizontal Reference) g&#246;r en fin liten linje som du kan dela upp stycken med. Denna kan du &#228;ndra f&#228;rg, storlek p&#229; &#229; lite annat sm&#229;tt o gott.

[48] Writing HTML in Notepad (2005年7月現在) http://personal.bgsu.edu/~schuetj/handout.doc

Horizontal Reference Line: <HR>

[49] Why you should learn HTML (Debra Hamer 著、2004年付け) http://expressionmag.com/html.html

[HR] this command places a line across the page. HR stands for “horizontal reference”.

この文書は内容的に Joe を参考にしたような臭においがします。

[50] Extra Tags (Georgia Panaritis 編、2003年9月付け) http://www.javascrypt.com/newschool/class4/class4-.htm

Joe を切り貼りした内容。

[51] http://webdesign.templatemonster.com/web/html-and-css/tutorials/tags-structure.2253.html

>>37 のサイトが著者とされている。やはり Joe (tag) と同じ。

[52] Why You Should Learn HTML (Debra Hamer 著) http://www.goarticles.com/cgi-bin/showa.cgi?C=20131

これも Joe の variant。タグが文字参照になっていないのでひどいことにwww

[53] why you should learn html (Debra Hamer 著、2004年付け) http://www.successfuloffice.com/why-you-should-learn-html.htm

>>52 は >>50 と内容的には同じだな。そしてこれも >>50 と同じ。

[54] HTML教學:第二單元:旗標 (2004年2月付け) http://www.geocities.com/alfredcave/Basic2.html

中文版までキター。 Joe (flag) と同じ内容。

[55] そのほかにもまだまだ沢山ありました。 IW:Google:"\"Horizontal Reference\" hr" なんかで検索してみてください。そして大方 Joe に行き着きますwwwwwwww

[56] ごく少数ですが >>48 のように horizontal reference line というのも観測できました。

HTML とは関係ない HRL という言葉が実際に存在しているようです。でもそういう言葉を知っていたからといって hr を連想するものでしょうか。むしろ horizontal reference という言葉をなんとなく覚えていて、 hr は線なのだからと勝手に line を補った、というストーリーの方が現実的です。

実際のところ Joe の horizontal reference 説と horizontal reference line 説に関連があるのかどうかは今のところ分かりません。

[84] CSS_XHTML_TIPS:XHTML-TIPS hrは構造か見栄えか (2007-09-09 08:36:20 +09:00 版) http://blog.livedoor.jp/cssxhtml/archives/53035331.html (名無しさん)

[85] CSS_XHTML_TIPS:前回の記事、「hrは構造か見栄えか」についてご意見をいただきました (2007-09-09 08:36:21 +09:00 版) http://blog.livedoor.jp/cssxhtml/archives/53084266.html

[103] hr要素は改名して、インライン要素とするのが活路かも: 我的春秋, 2023-11-27T12:07:14.000Z http://my-chunqiu.cocolog-nifty.com/blog/2007/04/hr_seperator_812f.html

[104] >>103 これはこの時期解体しつつあったCSSコミュニティ / Strictor 的な思想の文脈で hr がどう捉えられていたかをみるのにおもしろい記事。 br や hr は「見栄え」を表し、表現と構造の分離の 「構造」側を担う HTML に相応しくないのではないか、という問題意識があって、 それなら改頁を表す要素に流用しちゃえ、とこの記事は指摘している。 すると読者であるCSSコミュニティ的人々から、 改頁なんて表現と構造の分離の「表現」側、物理要素ど真ん中だし駄目に決まってるだろう、 と突っ込みが入る。

[105] >>103 の記事自体が引用しているのだけど、この当時既に HTML5 はこの問題を乗り越えた後だった。すなわち hr は HTML に相応しくないのではないかと疑念があって、 しかも section があれば十分ではないかという考えもあったものの、 にも関わらず章節内の論理的な区切りの需要があって、 名前はともかく hr はその要件を満たせる。 名前は今更変えられないが、それほど悪くない。 そのまま意味を読み替えても既存の用法と大きく矛盾しない。 ということで意味を「構造」に寄せて、構文的には旧来のものを踏襲することにした。 という経緯があったのだけど、引用はしてもそこまで深掘りせず、 1週遅れの議論であさっての方向を向いた提案をしているし、 駄目だしする読者達もそういう経緯を把握してなさそうだという。

[106] 理想の言語にするためなら、好きなように構文を変えても意味を変えてもいいだろう、 というのは HTML5 が否定した XHTML2 の価値観でもある。 そして(この記事の人がどうかはしらんけど) XHTML2 はこの辺のコミュニティーで何だかんだ人気があった。

[107] この記事の時代はもう HTML5 の時代が始まってるのだけど、 メディアで華々しく紹介された HTML5 は媒体とか API とか、せいぜい section とかの目につく新機能ばかりだったので、 HTML5 がどのような思想で開発され、新機能と既存機能がどのように(再)設計されたのか、 という Web 技術を語る人々が本当に参照するべき情報はほとんど日本語にならなかった。

例

[17] address 直前に使う例 RFC 1866 5.9

    <HR>
    <ADDRESS>February 8, 1995, CERN</ADDRESS>
    </BODY>

[13] 属性によるレンダリングへの影響の例 HTML 4 15.3

<HR width="50%" align="center">
<HR size="5" width="50%" align="center">
<HR noshade size="5" width="50%" align="center">

レンダリング例: IW:HTML4:"images/hr.gif"

どの水平線も、水平方向の利用可能領域の半分の長さで水平中央に置かれます。 最初の水平線はブラウザ既定の太さ、残りの2つは5画素分の太さとなり、 最後の水平線は影無しで塗りつぶした罫線となります。

[23] 最終修正日時の記述の例

<hr>
<p>Last change was on &lastchange;
<hr>

• 出典: [108] ISO-HTML 利用者の手引き 14.3 An example — Document time stamps http://purl.org/NET/ISO+IEC.15445/Users-Guide.html#TIMESTAMP

最終修正日時の記述を自動生成する手法の解説の中で、 HTML 文書内の最終修正日時部分周辺の例として挙げられています。

[109] 縦書きのウェブブラウザーの影鷹では縦線になりました。

[82] 影鷹のレンダリング例: https://suika.suikawiki.org/gate/2007/schema/schema/dfa7ca00bc459712b6090b622cc16429/cache.dat

よく取り上げられる話題

• hr は物理要素ではないのか? (>>71) [1993年〜]
• CSS border の代替としての hr の必要性 (>>72) [2000年頃〜]

メモ

[15] 英語やトルコ語のタグ講座で hair line が登場するものは、どうやら日本人が書いたものを基にしている模様です。 コピペ(?)による伝播をまとめてたら消えちゃったよ、ブラウザの馬鹿野郎!

[18] HTML 2.0 では pre の中に hr を入れられます。 いいのか、それで。

[29] XHTML2: Accessible, Usable, Device Independent and Semantic http://www.w3.org/2005/Talks/05-steven-xtech/

XHTML 2.0 の中の人のスライドですが、文学作品を引用して hr (に代わる separator) の必要性を説いています。

The Japanese community were also asking for a <vr>.

わろた。

[57] hr (に相当するもの) は強制空要素じゃない方が良いのではないかという気がしました。

hr が構造だという人 (賛成派) がいる一方で、反対派は2つの section の境界に過ぎないというかそれで十分表現可能だからそれでいいじゃないのと言うわけです。 確かに1つの節が要素の内容になってた方が色々処理が楽だしね。

でも別に両方あってもいいわけですよ。

<section/>
<separator xhtml1:style="letter-spacing: 3em">
***
</separator>
<section/>

みたいに。冗長だけど両方の利点を備えてるし。 separator が空要素なら大して面白くないけど、 内容を持てる意味がここで出てきます。 区切りの記号みたいなのは文書の構造と表現の中間くらいに位置していて (だから意見が割れるわけで)、 スタイル・シートで制御できてもいいし、 文書のマークの方で記述できても悪くは無いでしょう。

[59] CSS_XHTML_TIPS:前回の記事、「hrは構造か見栄えか」についてご意見をいただきました - livedoor Blog(ブログ) (2007-03-17 07:21:43 +09:00 版) http://blog.livedoor.jp/cssxhtml/archives/53084266.html (名無しさん 2007-03-18 03:02:18 +00:00)

[60] CSS_XHTML_TIPS:XHTML-TIPS hrは構造か見栄えか - livedoor Blog(ブログ) (2007-03-15 15:44:12 +09:00 版) http://blog.livedoor.jp/cssxhtml/archives/53035331.html (名無しさん 2007-03-18 03:04:41 +00:00)

[61] CSS_XHTML_TIPS:XHTML-TIPS hrの展望、separatorとして構造モジュール - livedoor Blog(ブログ) (2007-03-17 11:48:58 +09:00 版) http://blog.livedoor.jp/cssxhtml/archives/53138679.html

separator を根拠に hr を語るのはおかしいんじゃないの。 separator は hr のこういう問題を背景に登場したみたいな議論ならともかく。 (名無しさん 2007-03-18 03:06:21 +00:00)

[62] Re: 前回の記事、「hrは構造か見栄えか」についてご意見をいただきました - 行動記録 (IWAI, Masaharu 著, 2007-03-17 08:40:45 +09:00 版) http://iwaim.beering.be/2007/03/hr-element-2.html (名無しさん 2007-03-18 03:06:47 +00:00)

[75] >>15 の hr はヘアラインの略だとする説は、昔はよく解説書などにありましたが、最近見なくなりました。 (名無しさん)

[76] 我的春秋: 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:41:16 +00:00)

[77] d:id:quaa (2007-05-11 17:50:33 +09:00 版) http://d.hatena.ne.jp/quaa/20070511#p3 (名無しさん 2007-05-11 10:22:58 +00:00)

[78] Web標準って何? : 雑記帳 : der Gegenwart (Rusica 著, 2007-05-19 11:04:08 +09:00 版) http://www.rusica.net/note/2007/05/18/hr.html (名無しさん 2007-05-19 02:05:34 +00:00)

[79] XHTML BasicとCSS Mobile Profileを徹底マスターする (2007-06-10 20:52:36 +09:00 版) http://www.atmarkit.co.jp/fmobile/rensai/xhtml03/xhtml03.html

いわゆるヘアラインタグ。

はいはいわろすわろす (名無しさん)

[81] Weekly XHTML2 WG Teleconference -- 29 Aug 2007 (2007-09-05 18:51:46 +09:00 版) http://www.w3.org/2007/08/29-xhtml-minutes#item05 (名無しさん)

[83] Re: XHTML-TIPS hrは構造か見栄えか - 行動記録 (IWAI, Masaharu 著, 2007-08-29 00:37:03 +09:00 版) http://iwaim.beering.be/2007/03/hr-element.html (名無しさん)