propiedades lista linea grosor funciones etiquetas elementos color basicos atributos html css html5 semantic-markup

linea - lista de atributos html



¿Cuándo es semánticamente correcto usar el elemento hr? (3)

La referencia HTML5 dice que

El elemento hr representa una ruptura temática a nivel de párrafo, por ejemplo, un cambio de escena en una historia o una transición a otro tema dentro de una sección de un libro de referencia.

Esa descripción no es lo suficientemente descriptiva para mí. Utilizo el elemento hr en mis documentos HTML como una forma de separar contenido. ¿Es esto correcto?

¿Alguien podría dar algunos ejemplos sobre cuándo usarlo (aparte de los ejemplos que se muestran) y cuándo usar CSS estilo CSS lugar?


Es apropiado usarlo cuando tiene, por ejemplo, varios párrafos con dos temas distintos.

<p>Paragraph about domestic kittens</p> <p>Paragraph about kittens'' favourite foods</p> <p>Paragraph about kittens'' playfulness</p> <hr> <p>Paragraph about my day at work</p>

Si desea separar los temas entre imágenes y contenido, creo que esto también es apropiado.

<img src="/img/kitten.jpg" alt="kitten playing with ball"> <img src="/img/kitten1.jpg" alt="kitten drinking milk"> <hr> <img src="/img/zebra.jpg" alt="zebras in the wild">

El nuevo uso de hr parece ser solo para distinguir temas dentro de HTML. Si encuentra que su contenido está bien conectado, no sienta que necesita usar la etiqueta.


Mi respuesta corta y la forma en que lo he hecho es que uso los de <hr> cuando no hay otra forma de hacerlo de forma limpia con CSS. Para mí, esto se ha traducido en muchos años de escribir html y nunca tener que usar un <hr> .

Eventualmente, podría verme usando <hr> si solo estoy tratando de poner algún tipo de marcador entre dos secciones del mismo contenido.

Usando un ejemplo de una publicación de blog: pondría un <hr> cuando siento que es visualmente importante hacer la transición de un tema a otro.


Segun este articulo

En HTML 4.01, la etiqueta <hr> representaba una regla horizontal.

En HTML5, la etiqueta <hr> define una ruptura temática.

Sin embargo, la etiqueta <hr> puede seguir mostrándose como una regla horizontal en los navegadores visuales, pero ahora está definida en términos semánticos , en lugar de términos de presentación.

Todos los atributos de diseño (alinear, noshade, tamaño y ancho) en HTML 4.01 fueron desaprobados en HTML 4.01, y no son compatibles con HTML5. Use CSS para <hr> elemento <hr> .

En HTML5, use <hr> cuando esté desviando su tema del párrafo escrito anteriormente.