À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?
À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?
Respostas:
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.
<pre/>
para poesia. Dessa forma, você especifica explicitamente que a intenção é manter a composição original, incluindo possíveis indentações.
<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>
.
<br />
na assinatura de um email, como: <footer>Sincerely,<br />StrexCorp</footer>
Opiniões?
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.
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.
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;">
overflow:auto
o elemento que contém.
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.
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">↑</button>
</span>
<button id="moveLeft" value="vasakule">←</button>
<button id="moveDown" value="alla">↓</button>
<button id="moveRight" value="paremale">→</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 margin
propriedade CSS .