html - salto - ¿Deberían evitarse<br/> y<hr/> a toda costa en el diseño web?
linea horizontal css (18)
Constantemente encuentro sitios donde necesito usar la etiqueta <br /> porque CSS no puede hacer lo que necesito. ¿No se considera el <br /> 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 <hr /> ?
Aquí hay un ejemplo de donde me siento obligado a usar la etiqueta <br /> :
Quiero mostrar esto:
<address>1234 south east Main St. Somewhere, Id 54555</address>
Me gusta esto:
1234 south east main st. Somewhere, Id 54555
¿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 por el que alguien más está pagando, tratando de encontrar soluciones limitadas de CSS para varios navegadores a problemas de UI que las etiquetas 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 etiquetas, 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.
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 etiquetas BR?
Eso es un mal uso si vas estricto.
<br/> y <hr/> no son parte del contenido. Por ejemplo, <hr/> se usa comúnmente para separar bloques de texto. ¿Pero no es posible eso con border-bottom? Y <br/> 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.
Interesante pregunta. Siempre he usado <br/> como un retorno de carro (y, por lo tanto, como parte del contenido, realmente). No estoy seguro de si esa es la manera correcta de hacerlo, pero me fue muy útil.
<hr/> por otro lado ...
No diría a toda costa, pero si quieres ser purista, estas etiquetas 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. <hr /> se puede hacer a través de CSS y <br/> mediante el uso adecuado de etiquetas otehr como <p> .
Si no quieres ser un purista, úsalos :)
No hay nada de malo en usar <br /> o <hr />. Ninguno de ellos son etiquetas 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 <br /> mejor que el propio W3C:
El siguiente ejemplo es el uso correcto del elemento br:
<p> P. Sherman <br>
42 Wallaby Way <br>
Sydney </ p>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:
<p> <a ...> 34 comentarios. </a> <br>
<a ...> Añade un comentario. <a> </ p><p> Nombre: <nombre de entrada = "nombre"> <br>
Dirección: <nombre de entrada = "dirección"> </ p>Aquí hay alternativas a las anteriores, que son correctas:
<p> <a ...> 34 comentarios. </a> </ p>
<p> <a ...> Añade un comentario. <a> </ p><p> Nombre: <nombre de entrada = "nombre"> </ p>
<p> Dirección: <nombre de entrada = "dirección"> </ p>
<hr /> 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 gran poder tiene una gran responsabilidad, así que úselos correctamente.
Editar 1:
Otra idea que tuve después de hacer clic en "publicar": ha habido mucho sentimiento anti-<table> entre los desarrolladores web en los últimos años, y con buenas razones. Las personas estaban abusando de la etiqueta <table>, 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 <table>? ¿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 <table> está totalmente justificado, se convierte en un marcado semántico en lugar de formatearse. Es la misma situación con <br />. 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.
Personalmente, creo que hay cosas mucho peores que podrías hacer que usar esas dos etiquetas. Preocuparse excesivamente de ellos es una pérdida de tiempo.
Puse un <hr style="display:none"> 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.
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.
<br> es la forma HTML de expresar 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 expresarlos.
No todos los saltos de línea son el comienzo de un nuevo párrafo, y empaquetar el texto en <div> s (por ejemplo) solo para evitarlo me parece demasiado paranoico. ¿Por qué te molestan?
<hr /> y <br /> , al igual que todo lo demás, se puede abusar para hacer diseño cuando no deberían. <hr /> está destinado a ser utilizado para dividir visualmente secciones de texto, pero en un sentido localizado. <br /> está hecho para hacer lo mismo, pero sin la línea horizontal.
Sería un error de diseño usar <hr /> en un sitio como diseño, pero en este post, por ejemplo, sería correcto usar ambos <br /> y <hr /> , 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.
<hr/> y <br/> 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. <hr/> y <br/> 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.
Siempre y cuando no uses <br/> para formar párrafos, probablemente estés bien en mi libro;) Odio ver:
<p>
...lengthy first paragraph...
<br/>
<br/>
...lengthy second paragraph...
<br/>
<br/>
...lengthy third paragraph...
</p>
En cuanto a una dirección, lo haría así:
<address class="address">
<span class="street">1100 N. Wullabee Lane</span><br/>
<span class="city">Pensacola</span>, <span class="state">Florida</span>
<span class="zip">32503</span>
</address>
Pero es probable porque me encanta jQuery y me gustaría tener acceso a cualquiera de esas partes en cualquier momento :)
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 <br /> y <hr /> .
En cuanto a quitar <br /> etiquetas en mi propio marcado, uso <div> junto con la propiedad de margin css para manejar todo lo que necesite un salto de línea, y un <span> 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 <hr /> por css, simplemente creo una <div> 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 <div> 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 programador de Java), pero me encontré con esta pregunta durante algunas investigaciones y quise poner mi granito de arena en ...
HR tiene algunos usos hacky en este momento para evitar que los algoritmos de inflación de fuentes 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 <br> pero no use <hr> .
<BR> - LINE BREAK
- Esto es información de visualización. Todavía es de uso común, pero se usa con moderación.
<HR> - REGLA HORIZONTAL
- Mostrar información sin valor semántico - nunca la use. "Horizontal", por definición, es un atributo visual.
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 etiquetas <div> lugar de etiquetas <table> , solo para que pueda usar <div> .
Al diseñar su sitio web, es probable que no necesite el uso de etiquetas <br /> , 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 <br /> 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 etiquetas <br /> si esto es lo que necesita para separar verticalmente el contenido.