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


157

À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?


10
A melhor maneira de encontrar a melhor resposta é ir à sua equipe de desenvolvimento e perguntar POR QUÊ?
Azamsharp 12/11/2009

47
De repente, é a coisa errada a fazer para tentar obter uma resposta do StackOverflow, em vez dos membros da equipe?
Nosredna

7
Não, é apenas alguém que lhe deu uma resposta subjetiva e ele está nos pedindo para adivinhar o raciocínio por trás disso ... Basta ir e perguntar à pessoa que lhe deu a resposta subjetiva, especialmente se eles estiverem próximos (na mesma equipe de desenvolvimento)
Gabriel Magana

8
Normalmente, o "primeiro conselho" ocorre quando o funcionário é novo. Um novo funcionário nem sempre tem vontade de perguntar "por quê?" Obviamente, há momentos em que é melhor perguntar por quê, mas acho que Burak Ozdogan provavelmente entende o "por que" depois de ler essas perguntas. Ou pelo menos entende o que a comunidade de HTML em geral aborda bem o assunto para discuti-lo. Eu diria que ele fez a jogada certa vindo aqui para perguntar.
Nosredna

5
Eu entendo o seu conselho e você está certo. Mas o problema é que, quando você entra em uma nova equipe, há tantas informações que recebe em pouco tempo. E alguns deles são apenas mencionados; como um detalhe entre parênteses. Eu queria perguntar aqui por dois motivos: Para obter uma resposta e ver opiniões diferentes sobre como abordá-la. obrigado rapazes!
pencilCake

Respostas:


172

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.


38
Pessoalmente, eu preferiria usar <pre/>para poesia. Dessa forma, você especifica explicitamente que a intenção é manter a composição original, incluindo possíveis indentações.
Michał Górny

6
@ MichałGórny levanta um bom argumento - <br>parece que apenas é apropriado onde todas as condições a seguir se aplicam: 1. Novas linhas são semanticamente significativas, 2. Recuo não é semanticamente significativo (caso contrário, você deve usar a <pre>, 3. Não existe outro semanticamente apropriado como um parágrafo ou uma tag de cabeçalho. Os endereços de correspondência satisfazem todas essas três condições, assim como as letras das músicas. A poesia pode plausivelmente violar a condição 'indentação não é significativa' e, portanto, pode ser melhor colocada em uma <pre>.
Mark Amery

2
Que tal usar <br />na assinatura de um email, como: <footer>Sincerely,<br />StrexCorp</footer> Opiniões?
JHS 24/02

109

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>

4
Você não pode simplesmente remover seus <br> e adicionar CSS, porque se você removeu seus vídeos, não há nada para estilizar. Não é incrivelmente útil para dizer "remover suas quebras de linha" sem ajudar (literalmente) Preencha os espaços em branco
Gareth

7
Você está certo, iamkoa, mas isso não explica o porquê . Portanto, ele não responde à pergunta. 24 upvotes parecem um pouco demais.
Lightness Races in Orbit

@iamkoa Você não está explicando o porquê .
Fabian Picone #

Eu acho que a segunda opção é melhor porque é mais limpo e mais simples que eu acho que não é necessário o uso br
simon

26

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.


13

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.


9

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.


4

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


2

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.


1

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.


1

<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 />


1

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;">

1
Embora usado, esse método não é XHTML válido.
Iamkoa

2
Geralmente, você pode contornar esse "hack" usando overflow:autoo elemento que contém.
MPEN

2
@iamkoa: Eu não uso XHTML. HTML é HTML, não XML.
BalusC

1

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.


0

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.


0

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.


0

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>


-2

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 .


1
Observe que o uso de <p> adicionará uma margem de ~ 16px à parte superior e inferior. Defina cada margem da tag <p> como 0px para evitar espaçar as linhas usando mais altura do que deveria.
Satbir Kira
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.