2012-10-08 23 views
15

En estos días con HTML5 y CSS3, ¿se utilizan etiquetas <br> mal vistas cuando se puede usar margen/relleno?Style-wise <br> o elementos de relleno/margen

EDITAR: Esto es en lo que respecta al espacio entre elementos div para mi caso de uso, pero también se recomienda la recomendación general de mejores prácticas.

+0

En general, sugeriría no utilizar las etiquetas '
'. – Shmiddty

+1

Si esto no es puramente estilístico (por ejemplo, separación de pensamientos), es posible que esté buscando '


', con un estilo personalizado (transparente, con 'altura' o 'margen' para el espaciado). – 0b10011

Respuesta

28

En realidad, hay bastante reglas bien definidas en torno a su uso, que se remonta a los días de HTML 2.0 cuando se introdujo por primera vez: Caracteres

El elemento <BR> especifica un salto de línea entre las palabras (véase 6," , Palabras y Párrafos "). Por ejemplo:

<P> Pease porridge hot<BR> 
Pease porridge cold<BR> 
Pease porridge in the pot<BR> 
Nine days old. 

El elemento <br> en sí nunca fue pensado para ser utilizado para controlar margen/relleno. Aunque introdujeron un atributo de presentación clear en HTML 3.2 para manejar cosas como imágenes flotantes, pronto quedó obsoleto en HTML 4 y XHTML 1 a favor de CSS. Eso fue hace casi 15 años, así que realmente no es nada nuevo.

En HTML5, que han hecho que sea mucho más claro que <br> no está destinado a la presentación o diseño, con ejemplos (y): the clear attribute is obsolete

br elementos deben ser utilizados solamente para los saltos de línea que son en realidad parte del contenido, como en poemas o direcciones.

El siguiente ejemplo es el uso correcto del elemento de br:

<p>P. Sherman<br> 
42 Wallaby Way<br> 
Sydney</p> 

br elementos no debe ser utilizado para la separación de grupos temáticos en un párrafo.

Los siguientes ejemplos son no conformes, ya que abusan del elemento br:

<p><a ...>34 comments.</a><br> 
<a ...>Add a comment.</a></p> 
<p><label>Name: <input name="name"></label><br> 
<label>Address: <input name="address"></label></p> 

Éstos son alternativas a lo anterior, que son correctas:

<p><a ...>34 comments.</a></p> 
<p><a ...>Add a comment.</a></p> 

<p><label>Name: <input name="name"></label></p> 
<p><label>Address: <input name="address"></label></p> 

Por lo tanto, usar <br> en lugar de los márgenes CSS para propósitos de diseño siempre ha sido mal visto, en al menos por las personas que escribieron las especificaciones.

+4

La [especificación para HTML 5] (http://www.w3.org/TR/html5/the-br-element.html # the-br-element) es mucho más informativo que la referencia del lenguaje: * los elementos br deben usarse solo para los saltos de línea que son realmente parte del contenido, como en poemas o direcciones. * – Quentin

+0

@Quentin: Gracias por el enlace . La especificación HTML5 ha sido una pesadilla de navegación para mí por alguna razón y no pude ubicar esa sección. Actualizaré mi respuesta. – BoltClock

+0

Usar
me resulta más simple y más limpio. ¿Alguien puede explicar qué desventaja podría causar? –

0

Depende si le gusta trabajar con altura de línea o margen/relleno.

+7

Si usa la altura de línea para obtener el efecto de un margen, probablemente lo esté haciendo mal. –

Cuestiones relacionadas