<br /><hr />どっちを使ったらいいの？

はじめまして。
HTMLのコーダーをして1年になる者です。
clear="both"を、<hr />,<br />で使っているのをよく見かけますが、この二つを使う違いがいまいちわかりません…
またこの二つはW3C的にはどちらが正しいのでしょうか？
調べてはいるのですが、なかなかよい回答にたどり着きません。
回答よろしくお願いします。

No.3 ベストアンサー 回答者： xenotactic 回答日時： 2009/04/05 17:43

W3C的に言うと、現時点ではどちらも正しくないです。

clear="both"は「回り込みを解除する」という「視覚的な装飾」です。現在(xHTML1.0)のW3Cの考えでは、「視覚的な装飾」はすべてCSS（カスケーティングスタイルシート）で行い、HTMLでは「論理的な構造」を作成するためだけに使うということになっています。

clear="both"に似た効果をもつCSSは「clear:both;」です。style属性を使えばHTML内に直接CSSを書き込むことができます。

<br style="clear:both;" />
<hr style="clear:both;" />

この2つでどちらがいいかについてですが、これは場合によりけりです。W3Cは先ほど説明したように「HTMLは論理的な構造を作成するためだけ」に使うべきだと考えているので、「clear:both;を指定するためにbr要素やhr要素を入れる」というのはW3Cの考えに反しています。clear:both;を指定したいところにあった要素に対してclear:both;を指定し、clear:both;を指定するために新たに要素を付け加えるということはしない、というのが正しいやり方です。

この回答へのお礼

お返事遅くなりまして申し訳ないです。

質問をしてしばらくたちますが、なるべく<br /><hr />にclear:both;を使わないようにしています。

最近まで<br />でclear:both;を使ってたCSSは構成をすべてfloatでどうにかしようと思っていたので、<br /><hr />に固執しすぎてたのかな…と思っています。
今見るとスタイルシートもかなり汚いです…（汗）

回答のおかげで、いろんなところがスッキリしました。

ありがとうございます！

お礼日時：2009/04/26 23:42

No.6 回答者： reverie013 回答日時： 2009/04/06 11:04

clearfixで検索を掛けてみては如何でしょうか。

No.5 回答者： naokita 回答日時： 2009/04/05 23:28

W3C的な考えは、すでに回答されていますが、

br もそうだけど　hr も 空div も非表示にしているとして、
単純にどちらを使えば良いかってのなら、
CSSを解除したときのHTMLの解釈、表示されかたで決めればよろしい。
br か hr のどちらが適正かは、そのサイトの流れでのケースバイケース。

No.4 回答者： taparon 回答日時： 2009/04/05 20:30

CSSは、私もよくは知らないのですが。

スタイルシートに
.class { clear:both; }
.clear hr { display:none; }
として、HTMLでは
<div class="clear"><hr /></div>
とする方もいらっしゃるようです。
http://css.uka-p.com/cause/clear.html
意図はよく分からないのですが、W3C的には合ってないと思います。（わざわざhrを指定しておいて非表示にする、というのは、HTMLが論理表示を指示する、という考えに合っているかどうか？）

No.2 回答者： noname#83877 回答日時： 2009/04/05 17:23

brを使ってclearする時はかなり限られるのではないでしょうか。

例えば

<p><span style="float:left;">あああああああああ</span><span style="float:right;">いいいいい</span>
<br style="clear:both;" />ううううううううう</p>

こんな感じの時には使うかもしれません。
ですが、かなりマイナーだと思います。floatさせるときにはそれぞれのボックスごとに独立した段落の文章になることがほとんどなので。

hrに関してはそれなりに使われることはあるようです。
基本的にhrは1つのページで複数の主題が存在するときに使う要素なので、clearを指定しずらいのですが・・・

どちらの要素もclearするためにhtmlに追加する要素ではないということは間違えてはいけないところです。

この回答へのお礼

確かに<br />はなかなか使う機会はなさそうですね…
…私見事に間違いな使い方をしていました(汗)

しかし、こういう使い方もあるんだと勉強になりました。

ありがとうございました！

お礼日時：2009/04/06 19:29

No.1 回答者： noname#100277 回答日時： 2009/04/05 16:39

<hr />は罫線で「ブロックレベル」。

<br />は改行で「インライン」。
画像に対する文字列の回り込み解除なら<hr /><br />は本来は使いません。
拠って厳格に考えるとアウトですね。

この回答へのお礼

><hr />は罫線で「ブロックレベル」。
><br />は改行で「インライン」。
なるほど…そのような解釈だったんですね！
今までいまいちわからず闇雲に使っていたんですっきりしました！

ありがとうございます！

お礼日時：2009/04/06 11:19