¿Deberían evitarse y a toda costa en el diseño web?

Constantemente encuentro sitios donde necesito usar la etiqueta
porque CSS no puede hacer lo que necesito. ¿No se considera el
parte del “diseño” y no forma parte de la estructura del documento? ¿Cuál es el uso aceptable para esto? ¿Deben aplicarse las mismas reglas al


?

Aquí hay un ejemplo de donde me siento obligado a usar la etiqueta
:

Quiero mostrar esto:

1234 south east Main St. Somewhere, Id 54555

Me gusta esto:

 1234 sureste de la calle principal
 En algún lugar, Id 54555

No hay nada de malo en usar
o


. Ninguno de ellos son tags obsoletas, incluso en el nuevo borrador de HTML 5 (información de especificaciones relevantes). De hecho, es difícil indicar el uso correcto de la etiqueta
mejor que el propio W3C:

El siguiente ejemplo es el uso correcto del elemento br:

P. Sherman

42 Wallaby Way

Sydney

Los elementos br no se deben usar para separar grupos temáticos en un párrafo.

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

34 comentarios.

Añade un comentario.

Nombre:

Dirección:

Aquí hay alternativas a las anteriores, que son correctas:

34 comentarios.

Añade un comentario.

Nombre:

Dirección:


también puede ser parte del contenido, y no solo un elemento de visualización. Use el buen juicio cuando se trata de lo que es contenido y lo que no, y sabrá cuándo usar estos elementos. Ambos son elementos válidos y útiles en las especificaciones actuales de W3C. Pero con un gran poder viene una gran responsabilidad, entonces úsalas correctamente.

Editar 1:

Otra idea que tuve después de hacer clic en “publicar”: ha habido mucho sentimiento anti-

entre los desarrolladores web en los últimos años, y con buenas razones. Las personas estaban abusando de la etiqueta
, usándola para el diseño y el formato del sitio. No es para eso, así que no debes usarlo de esa manera. ¿Pero eso significa que nunca debes usar la etiqueta
? ¿Qué sucede si realmente tiene una tabla de honestidad en su código, por ejemplo, si estaba escribiendo un artículo de ciencia y desea incluir la tabla periódica de los elementos ? En ese caso, el uso de
está totalmente justificado, se convierte en un marcado semántico en lugar de formatearse. Es la misma situación con
. Cuando es parte de su contenido (es decir, texto que debe romperse en esos puntos para ser el inglés correcto), úselo. Cuando solo lo haces por razones de formato, lo mejor es intentarlo de otra manera.

Siempre y cuando no uses
para formar párrafos, probablemente estés bien en mi libro;) Odio ver:

 

...lengthy first paragraph...

...lengthy second paragraph...

...lengthy third paragraph...

En cuanto a una dirección, lo haría así:

 
1100 N. Wullabee Lane
Pensacola, Florida 32503

Pero es probable porque me encanta jQuery y me gustaría tener acceso a cualquiera de esas partes en cualquier momento 🙂

Personalmente, creo que hay cosas mucho peores que podrías hacer que usar esas dos tags. Preocuparse excesivamente de ellos es una pérdida de tiempo.


y
, al igual que todo lo demás, se puede abusar para hacer diseño cuando no deberían.


está destinado a ser utilizado para dividir visualmente secciones de texto, pero en un sentido localizado.
está hecho para hacer lo mismo, pero sin la línea horizontal.

Sería un error de diseño usar


en un sitio como diseño, pero en este post, por ejemplo, sería correcto usar ambos
y


, ya que esta sección del texto todavía tiene que ser una sección de texto, incluso si el diseño del sitio ha cambiado.


y
son elementos de presentación que no tienen ningún valor semántico para el documento, por lo que desde una perspectiva purista sí, deben evitarse.

Piensa en HTML no como una herramienta de presentación, sino más bien como un documento que necesita ser autodescriptivo.


y
no agregan ningún valor semántico, sino que representan una presentación muy específica en el navegador.

Dicho todo eso, sea pragmático en su enfoque. Intenta evitarlos a toda costa, pero si te encuentras codificando las paredes y el techo para evitarlos, es mejor que los uses. La semántica es importante, pero los casos marginales como este no son los más importantes.

Creo que evitar completamente el uso de una solución comúnmente aceptada (incluso si está desactualizado) es lo mismo que diseñar una tabla con tags

lugar de tags

, solo para que pueda usar

.

Al diseñar su sitio web, es probable que no necesite el uso de tags
, pero aún así puedo imaginar que sean útiles cuando se necesite la intervención del usuario, por ejemplo.

No veo nada de malo en el uso de
pero no he encontrado muchas situaciones en las que haya requerido su uso. En la mayoría de los casos, probablemente haya soluciones más elegantes (y más bonitas) que el uso de tags
si esto es lo que necesita para separar verticalmente el contenido.

Puse un


entre secciones. Por ejemplo, entre columnas en un diseño de varias columnas. En los navegadores que no admiten CSS, la separación seguirá siendo clara.

¿No porque? Son construcciones útiles.


Agregar este apéndice (con HR de acompañamiento), en caso de que mi respuesta breve se interprete como carente de consideración adecuada. 😉

Puede ser, y a menudo es, una pérdida de tiempo increíble, tiempo que alguien más suele pagar, tratando de encontrar soluciones limitadas de CSS para varios navegadores a problemas de UI que las tags BR y HR, y sus gustos, pueden resolver en dos segundos planos. Por qué algunos usuarios de UI pierden tanto tiempo tratando de encontrar formas “puras” de moverse usando construcciones HTML probadas y verdaderas como saltos de línea y reglas horizontales es un completo misterio para mí; ambas tags, entre muchas otras, son totalmente legítimas y de hecho están ahí para que las use. “Puro”, en ese sentido, es una tontería.

Un diseñador con el que trabajé simplemente no pudo obligarse a hacerlo; desperdiciaba horas, a veces días, tratando de “codificar” a su alrededor, y aún así aparecía con algo que no funcionaba en Opera. Encontré eso totalmente desconcertante. Amigo, agrega BR, hecho. Totalmente legal, funciona como un encanto, y todos están felices.

Estoy a favor de la presentación de resúmenes, no me malinterpreten; todos hacemos el mejor trabajo posible. Pero sé sensato. Si has pasado cinco horas tratando de encontrar alguna forma de lograr, en el guión, algo que BR te dé en este momento, y los dioses no lloverán sobre ti por hacerlo, entonces hazlo y sigue adelante. Lo más probable es que, si es tan problemático, puede haber algún problema con su solución, de todos modos.

Interesante pregunta. Siempre he usado
como un retorno de carro (y, por lo tanto, como parte del contenido, realmente). No estoy seguro de si esa es la forma correcta de hacerlo, pero me fue muy útil.


por otro lado …

No diría a toda costa, pero si quieres ser purista, estas tags no tienen nada que ver con la estructura y todo con el diseño, pero se supone que HTML separa el contenido de la presentación.


se puede hacer a través de CSS y
mediante el uso adecuado de tags otehr como

.

Si no quieres ser un purista, úsalos 🙂

Creo que rara vez debería necesitar la etiqueta BR en sus plantillas. Pero a veces puede ser necesario en el contenido, generado por el usuario y generado por el sistema. Por ejemplo, si desea mantener un fragmento de texto en el párrafo, pero necesita una nueva línea antes.

¿En qué ocasiones te sientes obligado a usar tags BR?


es la forma HTML de express un salto de línea, ya que no hay otra forma de hacerlo.

Los saltos de línea física en el código fuente se ignoran correctamente (más correctamente: se tratan como un espacio en blanco único), por lo que necesita una forma de marcado para expresslos.

No todos los saltos de línea son el comienzo de un nuevo párrafo, y el empaquetado de texto en

s (por ejemplo) solo para evitarlo me parece demasiado paranoico. ¿Por qué te molestan?

BR está bien, ya que un salto de línea difícil podría ser parte del contenido, por ejemplo, en bloques de código (aunque probablemente usaría el elemento PRE para eso) o letras.

HR, por otro lado, es puramente presentacional: una regla horizontal, una línea horizontal. Use borde superior / inferior para elementos vecinos en su lugar.

Personalmente, creo que, en aras de una verdadera separación de contenido y estilo, se deberían evitar
y


.

En cuanto a quitar
tags en mi propio marcado, uso

junto con la propiedad de margin css para manejar todo lo que necesite un salto de línea, y un para cualquier cosa que esté en línea, pero de una “clase de contenido” diferente (obviamente distinguiéndolos con el atributo de class ).

Para reemplazar una etiqueta


por css, simplemente creo una

con la propiedad css border-top-style establecida en solid y las otras tres partes establecidas en none . El margin y las propiedades de padding de dicho

luego manejan la ubicación / posición real de la línea horizontal.

Como dije, no soy un experto, mi experiencia en diseño web es principalmente un efecto secundario de mi trabajo con páginas JSP (soy un progtwigdor de Java), pero me encontré con esta pregunta durante algunas investigaciones y quise poner mi granito de arena en …

asegúrese de incluir una DTD que especifique XHTML.

Si su DTD no se encuentra o especifica HTML4, la carne muerta como un análisis correcto de HTML4 o inferior podría ensuciar su documento con corchetes angulares.

HR tiene algunos usos hacky en este momento para evitar que los algoritmos de inflación de fonts de los navegadores móviles entren en juego.

Además, si tiene un montón de contenido pequeño separado por recursos humanos, el robot de Google lo verá en la actualidad como ‘N entradas separadas’, lo que podría serle útil.

En realidad, las BR solo deberían usarse como un salto de línea dentro de un párrafo, que es un uso tipográfico bastante raro (excepto quizás dentro de una celda de tabla), y no conozco ninguna razón extravagante para usarlas.

Puede usar
pero no use


.


– LINE BREAK
– Esto es información de visualización. Todavía es de uso común, pero se usa con moderación.


– REGLA HORIZONTAL
– Mostrar información sin valor semántico – nunca la use. “Horizontal”, por definición, es un atributo visual.

Fuente: Guía de uso correcto para tags HTML

Eso es un mal uso si vas estricto.


y


no son parte del contenido. Por ejemplo,


se usa comúnmente para separar bloques de texto. ¿Pero no es posible eso con border-bottom? Y
se ve en muchos casos como una forma de limitar el texto a cierta forma, lo cual no se puede lograr con css?

Por supuesto que no irás Estricto, no te preocupes demasiado.