¿A veces es malo usar <BR />?

¿A veces es malo usar <BR/>etiquetas?

Pregunto porque algunos de los primeros consejos que me dio mi equipo de desarrollo fueron los siguientes: No usar <BR/>; en su lugar, usa estilos. ¿Pero por qué? ¿Hay resultados negativos al usar <BR/>etiquetas?

La razón principal para no usar <br>es que no es semántica . Si desea dos elementos en diferentes bloques visuales, probablemente los desee en diferentes bloques lógicos.

En la mayoría de los casos, esto significa simplemente usar diferentes elementos, por ejemplo <p>Stuff</p><p>Other stuff</p>, y luego usar CSS para espaciar los bloques correctamente.

Hay casos en los que <br>es semánticamente válido, es decir, casos en los que el salto de línea forma parte de los datos que envía. Esto solo se limita a 2 casos de uso: poesía y direcciones postales.

Creo que su equipo de desarrollo se está refiriendo <br />en lugar del espacio de margen. Para hacer un espacio vacío entre los elementos, utilice el estilo de relleno / margen mediante CSS.

Mal uso de <br />:

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

Buen uso de <br />:

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

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

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

En general, <br/>es una indicación de HTML semántico pobre. El caso más común es usar <br/>para declarar separaciones de párrafos, que hay formas mucho mejores de hacerlo semánticamente. Ver Cama y Desayuno Rápido .

Hay ocasiones en que es la etiqueta adecuada para usar, pero se abusa de ella con la frecuencia suficiente para que las personas adopten una mentalidad de "no usar" como para forzar un mejor pensamiento semántico.

Lo que su equipo quería decir era probablemente no usar <br> s para dividir entre párrafos.

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

es la mejor manera de hacerlo, porque puedes ajustar fácilmente los espacios entre párrafos a través de CSS. Aparte de eso, no puedo pensar en nada hablando contra saltos de línea como tal.

El mismo concepto se aplica a por qué no usamos tablas para el diseño: use tablas para tablas y CSS para el diseño.

Úselo <br/>para romper líneas en un bloque de texto y CSS si desea afectar el diseño.

Especificar el diseño directamente dificulta la adaptación del sitio para diferentes tamaños de página o fuentes, por ejemplo.

Por lo general, siempre estableceré márgenes y relleno apropiados en los elementos que usan CSS: es mucho menos complicado que un montón de <br />s en todo el lugar, además de ser más semánticamente correcto.

Probablemente, la única vez que usaría una <br />preferencia a los márgenes y el relleno establecidos por CSS, incluso si no es estrictamente técnicamente correcto, es si fue un incidente aislado donde se necesitaba un poco más de espacio. Si me tengo absolutamente una gran hoja de estilo y no parecía ajuste de un valor de hasta un estilo adicional sólo para que una ocurrencia, que puede utilizar un <br />como un hecho aislado.

Como la mayoría de las cosas, las cosas <br />no son malas siempre que se usen correctamente.

Intento escribir mi marcado de manera que sea fácilmente legible con CSS deshabilitado. Si solo está utilizando BR para agregar espacio, es mejor usar márgenes y relleno.

<br />debe usarse solo para saltos de línea y no para aplicar estilo a una página. Por ejemplo, si necesita espacio adicional entre los párrafos, deles una clase y aplique el relleno adicional a los párrafos. No extiendas tus párrafos con<br /><br ><br />

Deben usarse para representar nuevas líneas. Nada mas. No llenar el espacio como en el sitio promedio de geocities. Sin embargo, solo hay un caso en el que pueden ser útiles para otros fines que no sean poner una nueva línea: limpiar los flotadores.

<br style="clear: both;">

No use tres o más correos consecutivos <br>, es una señal de que los está usando con fines estilísticos y no, no debería.

Algunos dirían que un solo <br>es suficiente y que en lugar de dos debería usar <p></p>, pero hay situaciones (por ejemplo, guiones) en las que desea introducir una pausa más larga sin implicar un cambio de tema o un nuevo período de inicio, como generalmente hace un párrafo.

Están bien, si se usan adecuadamente. Por ejemplo, no debe usarlos en lugar de <p>etiquetas o para crear espacios entre elementos. Probablemente estés haciendo algo mal si alguna vez tienes dos seguidos.

Si haces esto: <BR/> <BR/>

Obtendrá un diseño diferente en diferentes navegadores.

Más profundo:
si lo usa <BR/>solo para saltos de línea, está bien.
Si lo usa <BR/>como espaciador de línea, no está bien.

Aquí hay un ejemplo de cómo <br>puede afectar negativamente el estilo (ejecutar fragmentos para imágenes)

(observe el botón desalineado y el espacio impar a la derecha):

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>

En HTML (HTML hasta 4): uso <br>
En HTML 5: <br> se prefiere, pero <br/>y <br />es también aceptable
En XHTML: <br /> se prefiere. También puede usar <br/>o<br></br>

Entonces el uso de la <br>etiqueta es HTML perfectamente válido. ¿Pero <br>no se recomienda el uso de ?

La razón principal por la que no se debe usar <br>es porque no es una etiqueta semántica y no tiene contenido en su interior. Su uso se puede evitar como,

<p>some<br>text<p>

se puede marcar sin <br>como

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

Si está utilizando <br>otro propósito, como el espacio superior, etc., eso se puede lograr a través de la marginpropiedad CSS .