¿A veces es malo usar <BR />?

157

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

lápiz de pastel
fuente
10
La mejor manera de encontrar la mejor respuesta es ir a su equipo de desarrollo y preguntarles ¿POR QUÉ?
azamsharp
48
¿Es de repente lo incorrecto hacer para tratar de obtener una respuesta de StackOverflow en lugar de los miembros del equipo?
Nosredna
77
No, es solo que alguien le dio una respuesta subjetiva y nos está pidiendo que adivinemos el razonamiento detrás de esto ... Solo ve y pregúntale a la persona que te dio la respuesta subjetiva, especialmente si están cerca (en el mismo equipo de desarrollo)
Gabriel Magana
8
Por lo general, el "primer consejo" llega cuando el empleado es nuevo. Un nuevo empleado no siempre tiene ganas de preguntar "¿por qué?" Obviamente, hay momentos en que es mejor preguntar por qué, pero creo que Burak Ozdogan probablemente comprende el "por qué" después de leer estas preguntas. O al menos entiende lo que la comunidad HTML en general hace sobre el tema lo suficientemente bien como para discutirlo. Diría que hizo el movimiento correcto al venir a preguntar.
Nosredna el
55
Entiendo que su consejo y tipo de usted son correctos. Pero la cuestión es que cuando ingresas a un nuevo equipo, recibes tantas entradas en poco tiempo. Y algunos de ellos solo se mencionan; como un detalle entre paréntesis. Quería preguntarlo aquí por dos razones: para obtener una respuesta y ver diferentes opiniones sobre cómo abordarla. ¡gracias chicos!
pencilCake el

Respuestas:

173

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.

Gareth
fuente
38
Personalmente, preferiría usar <pre/>para la poesía. De esta forma, especifica explícitamente que la intención es mantener la composición original, incluidas las posibles sangrías.
Michał Górny
66
@ MichałGórny plantea un buen punto: <br>parece que solo es apropiado cuando se aplican todas las condiciones siguientes: 1. Las nuevas líneas son semánticamente significativas, 2. La sangría no es semánticamente significativa (de lo contrario, debe usar un <pre>, 3. No existe otro semánticamente apropiado etiqueta, como un párrafo o una etiqueta de encabezado. Las direcciones de correo satisfacen estas tres condiciones, y también las letras de las canciones. La poesía podría violar la condición de 'sangría no es significativa', por lo que podría estar mejor ubicado en una <pre>.
Mark Amery
2
¿Qué pasa con el uso <br />en la firma de un correo electrónico, como: <footer>Sincerely,<br />StrexCorp</footer> Opiniones?
JHS
109

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>
iamkoa
fuente
44
No puede simplemente eliminar sus <br> sy agregar CSS, porque si ha eliminado sus <br> no hay nada que diseñar. No es increíblemente útil decir "eliminar los saltos de línea" sin ayudar (literalmente) a completar los espacios en blanco
Gareth
77
Tienes razón, iamkoa, pero esto no explica por qué . Por lo tanto, no responde la pregunta. 24 votos a favor parecen un poco demasiado.
Carreras ligeras en órbita
@iamkoa No estás explicando por qué .
Fabian Picone
Creo que la segunda opción es mejor porque es más limpia y más simple. Creo que no es necesario usar br
simon
26

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.

fengb
fuente
13

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.

Pekka
fuente
9

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.

Dieter G
fuente
4

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

Martin Beckett
fuente
2

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.

DichaC
fuente
1

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.

BStruthers
fuente
1

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

Zoe
fuente
1

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;">
BalusC
fuente
1
Aunque se utiliza, este método no es válido XHTML.
iamkoa
2
A menudo puede evitar este "truco" utilizando overflow:autoel elemento contenedor en su lugar.
mpen
2
@iamkoa: no uso XHTML. HTML es HTML, no XML.
BalusC
1

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.

ZJR
fuente
0

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.

mpen
fuente
0

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.

GY
fuente
0

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>

mhpreiman
fuente
-2

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 .

Aamir Shahzad
fuente
1
Tenga en cuenta que el uso de <p> agregará un margen de ~ 16px en la parte superior e inferior. Establezca cada uno de los márgenes de la etiqueta <p> en 0px para evitar espaciar las líneas usando más altura de la que deberían.
Satbir Kira