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

Question

El HTML5 reference dice que

El elemento hr representa 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 suficiente para mí. Uso el elemento hr en mis documentos HTML como una forma de separar el contenido. ¿Es esto correcto?

¿Alguien podría dar algunos ejemplos sobre cuándo usarlo (aparte de los ejemplos mostrados) y cuándo usar el estilo CSS?

Answer 1

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 sólo para distinguir los aspectos incluidos en HTML. Si encuentra que su contenido está bien conectado, no sienta que necesita usar la etiqueta.

Answer 2

Mi respuesta breve y la forma en que lo he hecho es que utilizo <hr> cuando simplemente no hay otra manera de hacerlo limpiamente 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 un <hr> si solo estoy tratando de poner algún tipo de marcador entre dos secciones del mismo contenido.

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

Answer 3

Según this article

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

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

Sin embargo, la etiqueta <hr> todavía se puede mostrar como una línea horizontal en navegadores visuales, pero ahora es se define en términos semánticos, en lugar de términos de presentación.

Todos los atributos de diseño (align, noshade, size y width) en HTML 4.01 han quedado obsoletos en HTML 4.01 y no son compatibles con HTML5. Use CSS al estilo , en su lugar, el elemento <hr>.

En HTML5, use <hr> cuando desvíe su tema del párrafo escrito anteriormente.