web-dev-qa-db-ja.com

<BR />を使用するのは時々悪いですか？

<BR/>タグを使用するのは時々悪いですか？

開発チームが私に与えた最初のアドバイスのいくつかはこれだったので、私は尋ねます：<BR/>を使用しないでください。代わりに、スタイルを使用します。しかし、なぜ？ <BR/>タグを使用すると、否定的な結果がありますか？

htmltagsstyles
140
pencilCake

<br>を使用しない主な理由は、 セマンティック ではないためです。異なる視覚ブロックに2つのアイテムが必要な場合、おそらく異なる論理ブロックにそれらが必要です。

ほとんどの場合、これは異なる要素、たとえば<p>Stuff</p><p>Other stuff</p>を使用し、CSSを使用してブロックを適切に配置することを意味します。

<br>が意味的に有効な場合、つまり、改行が送信するデータのpartである場合があります。これは実際には2つのユースケース（詩と住所）に限定されています。

150
Gareth

あなたの開発チームはマージン間隔の代わりに<br />を参照していると思います。要素間に空のスペースを作るには、CSSを介してパディング/マージンスタイルを使用します。

<br />の不適切な使用：

<div>
   Content
</div>
<br />
<br />
<br />
<br />
<div>
     More content...
</div>

<br />の適切な使用：

<style>
     div {
          margin-top:10px;
     }
</style>

<div>
   Content<br />
   Line break
</div>

<div>
     More content...
</div>
102
iamkoa

通常、<br/>は、セマンティックHTMLが不十分であることを示しています。最も一般的なケースは、<br/>段落区切りを宣言します。これは、セマンティックに行うはるかに優れた方法があります。 Bed and BReakfast を参照してください。

使用するのが適切なタグである場合もありますが、より良いセマンティック思考を強制するために、人々は「使用しない」メンタリティを採用するほど頻繁に悪用されます。

25
fengb

あなたのチームが意図したことは、おそらく段落間で分割するために<br>を使用しないことでした。

<p>I am a paragraph</p>
<p>I am a second paragraph</p>

これは、CSSを使用して段落間のスペースを簡単に調整できるためです。それ以外は、改行について話すものは何も考えられません。

13
Pekka 웃

レイアウトにテーブルを使用しない理由にも同じ概念が適用されます。テーブルにはテーブルを、レイアウトにはCSSを使用します。

つかいます <br/>レイアウトに影響を与えたい場合、テキストブロックとCSSの改行に使用します。

8
Dieter G

レイアウトを直接指定すると、たとえばさまざまなページサイズやフォントにサイトを適合させることが難しくなります。

4
Martin Beckett

通常は、CSSを使用して要素に適切なマージンとパディングを常に設定します。<br />sは、意味的に正確であることを除けば、あちこちにあります。

おそらく私が使用するのは<br />厳密に技術的に正確ではない場合でも、CSSによって設定されたマージンとパディングよりも、わずかに多くのスペースが必要な孤立したインシデントであった場合です。私が非常に大きなスタイルシートを持っていて、その1つの出来事のためだけに追加のスタイルを設定する価値がなかった場合、私はmay<br />一回限り。

ほとんどのものと同様に、<br />sは、正しく使用されていれば悪いことではありません。

2
BlissC

three以上の連続<br>sを使用しないでください。これは、それらを文体的な目的で使用している信号であり、使用しないでください。

単一の<br>で十分であり、2つの代わりに<p></p>を使用する必要があると言う人もいますが、トピックの変更や段落が通常行うように、新しい期間が始まります。

2
ZJR

これらは、改行を表すために使用されます。これ以上何もない。平均的なジオシティーズのサイトのようにスペースを埋めないでください。ただし、それらがmayで改行を入れる以外の目的に役立つ場合は1つしかありません。フロートをクリアするためです。

<br style="clear: both;">
1
BalusC

<br />は、改行にのみ使用し、ページにスタイルを適用するためには使用しないでください。たとえば、段落間に余分なスペースが必要な場合は、クラスにクラスを追加し、段落に余分なパディングを適用します。 <br /><br ><br />で段落を広げないでください

1
Zoe

これを行う場合：<BR/> <BR/>

異なるブラウザで異なるレイアウトを取得します。

もっと深く：
改行のみに<BR/>を使用する場合-わかりました。
<BR/>をラインスペーサーとして使用する場合-よくありません。

1
G.Y

<br>はスタイリングに悪影響を与える可能性があります（ビジュアルのスニペットを実行）

（右側のボタンと奇数スペースの位置がずれていることに注意してください）：

button {
  width: 70px;
  height: 70px;
}
#arrows {
  border: solid thin red;
  display: inline-block;
}
#arrows span:first-of-type { 
  text-align: center; 
  display: block;
}
#moveUp {
  margin: 0;
}
/* In the current case instead of <br> use display */
/*
#arrows span:last-of-type { 
  display: block;
}
*/
<div id="arrows">
  <span>
    <button id="moveUp" value="üles">&uarr;</button> 
  </span>
  <button id="moveLeft" value="vasakule">&larr;</button> 
  <button id="moveDown" value="alla">&darr;</button> 
  <button id="moveRight" value="paremale">&rarr;</button> 
  <br>    <!-- note the shifted button and odd space on right -->
  <span>or move with keyboard arrows</span>
</div>
0
mhpreiman

CSSを無効にしても簡単に読めるようにマークアップを書きます。 BRを使用してスペースを追加するだけの場合は、マージンとパディングを使用することをお勧めします。

0
BStruthers

適切に使用すれば問題ありません。たとえば、<p>タグの代わりに使用したり、要素間にスペースを作成したりしないでください。連続して2つある場合、おそらく何か間違ったことをしているでしょう。

0
mpen