Às vezes, é ruim usar <BR />?

Às vezes, é ruim usar <BR/>tags?

Pergunto porque alguns dos primeiros conselhos que minha equipe de desenvolvimento me deu foram: Não use <BR/>; em vez disso, use estilos. Mas por que? Existem resultados negativos ao usar <BR/>tags?

O principal motivo para não usar <br>é que não é semântico . Se você deseja dois itens em diferentes blocos visuais, provavelmente os deseja em diferentes blocos lógicos.

Na maioria dos casos, isso significa apenas usar elementos diferentes, por exemplo <p>Stuff</p><p>Other stuff</p>, e depois usar CSS para espaçar os blocos corretamente.

Há casos em que <br>é semanticamente válido, ou seja, casos em que a quebra de linha faz parte dos dados que você está enviando. Isso é realmente limitado apenas a 2 casos de uso - poesia e endereços para correspondência.

Eu acho que sua equipe de desenvolvimento está se referindo <br />no lugar do espaçamento das margens. Para deixar espaço vazio entre os elementos, use o estilo de preenchimento / margem via CSS.

Mau uso de <br />:

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

Bom uso de <br />:

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

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

<div>
     More content...
</div>

Geralmente, <br/>é uma indicação de HTML semântico ruim. O caso mais comum é o uso <br/>para declarar separações de parágrafos, que existem maneiras muito melhores de fazê-lo semanticamente. Veja Cama e café da manhã .

Há ocasiões em que é a etiqueta apropriada a ser usada, mas é abusada com bastante frequência que as pessoas adotem uma mentalidade de "não use" para forçar um melhor pensamento semântico.

O que a sua equipe queria dizer era provavelmente não usar os s para dividir os parágrafos.

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

é a melhor maneira de fazer isso, porque você pode facilmente ajustar os espaços entre parágrafos por meio de CSS. Fora isso, não consigo pensar em nada falando contra a quebra de linha como tal.

O mesmo conceito se aplica ao motivo pelo qual não usamos tabelas para layout - use tabelas para tabelas e CSS para layout.

Use <br/>para linhas de interrupção em um bloco de texto e CSS se desejar afetar o layout.

A especificação direta do layout dificulta a adaptação do site para diferentes tamanhos de página ou fontes, por exemplo.

Geralmente, sempre definirei margens e preenchimentos apropriados nos elementos usando CSS - é muito menos confuso do que um monte de <br />s em todo o lugar, além de ser mais semanticamente correto.

Provavelmente, o único momento em que eu usaria um <br />em preferência às margens e preenchimento definidos pelo CSS, mesmo que não seja estritamente tecnicamente correto, é se fosse um incidente isolado, onde um pouco mais de espaço era necessário. Se eu tivesse uma folha de estilo bastante grande e não parecesse valer a pena configurar um estilo adicional apenas para aquela ocorrência, eu poderia usar a <br />como um caso único.

Como a maioria das coisas, <br />s não é uma coisa ruim, desde que sejam usadas corretamente.

Eu tento escrever minha marcação de uma maneira que seja facilmente legível com o CSS desativado. Se você estiver apenas usando BRs para adicionar espaçamento, é melhor usar margens e preenchimento.

<br />deve ser usado apenas para quebras de linha e não para aplicar estilo a uma página. Por exemplo, se você precisar de espaço extra entre parágrafos, forneça uma classe e aplique o preenchimento extra aos parágrafos. Não espalhe seus parágrafos com<br /><br ><br />

Eles devem ser usados ​​para representar novas linhas. Nada mais. Não preencher espaço como no local médio das geocidades. No entanto, existe apenas um caso em que eles podem ser úteis para outros fins que não colocar uma nova linha: limpar os carros alegóricos.

<br style="clear: both;">

Não use três ou mais <br>s consecutivos , é um sinal de que você os está usando para fins estilísticos e não, não deveria.

Alguns diriam que um único <br>é suficiente e, em vez de dois, você deve usar <p></p>, mas há situações (por exemplo, roteiros) em que você deseja introduzir uma pausa mais longa sem implicar uma mudança de tópico ou um novo período inicial, como costuma fazer um parágrafo.

Eles estão bem, se usados ​​adequadamente. Por exemplo, você não deve usá-las no lugar de <p>tags ou para criar espaçamento entre os elementos. Você provavelmente está fazendo algo errado, se você tiver dois seguidos.

Se você fizer isto: <BR/> <BR/>

Você obterá um layout diferente em diferentes navegadores.

Mais profundo:
se você usar <BR/>apenas para quebras de linha - ok.
Se você usar <BR/>como espaçador de linha - não está bem.

Aqui está um exemplo de como <br>pode afetar negativamente o estilo (snippet de execução para recursos visuais)

(observe o botão desalinhado e o espaço ímpar à direita):

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>

Em HTML (até HTML 4): uso <br>
em HTML 5: <br> é o preferido, mas <br/>e <br />é também aceitável
em XHTML: <br /> é o preferido. Também pode usar <br/>ou<br></br>

Portanto, o uso da <br>tag é perfeitamente válido em HTML. Mas o uso de <br>não é recomendado?

A principal razão pela qual não usar <br>é porque não é uma tag semântica e não possui conteúdo. Seu uso pode ser evitado como,

<p>some<br>text<p>

pode ser marcado sem <br>como

 <p>some</p>
 <p>text<p>

Se você estiver usando <br>outro objetivo, como espaçamento superior, etc., isso pode ser alcançado através da marginpropriedade CSS .