Uso correcto de HTML5 <hr> tag

Question

Estoy escribiendo una nueva página web para una empresa y tengo (un conjunto sano de) recomendaciones HTML5/W3C en mente.

Después de leer el significado semántico de <hr />, me preguntaba si esto era un buen lugar para utilizarlo:

<section name="historyItem"> 
    <h2>2002</h2> 
    <p>Dolorem ipsum dolor sit amet in 2002, consectetur [...]</p> 
    <hr /> 
    <ul> 
     <li><a href="#">Link A</a></li> 
     <li><a href="#">Link B</a></li> 
    </ul> 
</section> 

Mi línea de razonamiento es que, sí, que <hr /> representa un cambio temático de sección descripción a enlaces de sección, pero no estoy seguro de eso.

Tal vez "cambio temático" significa tener un nuevo párrafo más adelante sobre otro tema, y ​​por lo tanto mi ejemplo no sería "correcto". ¿Qué piensas?

(ps .: Sí, eso es <ul> CSS de estilo para adaptarse a una sola línea y de aspecto fresco)

Answer 1

veo lo que quiere decir. Pero personalmente, no me molestaría. Pregúntate por qué estás usando la etiqueta en primer lugar. Si desea delinear un cambio entre el párrafo y los enlaces, entonces, en términos de marcado puro, no creo que sea necesario. Si se trata de la apariencia de su página (es decir, si desea una regla que delimite las dos áreas), nuevamente cuestionaré su utilidad, dado que puede aplicar un borde al párrafo o a las etiquetas de la lista desordenada.

Por supuesto, teniendo en cuenta que se trata de html5, usted podría ir hasta el final y utiliza la etiqueta <section> ...

Answer 2

vista temático, <hr> significa el final de una "sección" y el inicio del "otro". Básicamente, estos deben aparecer después de sus etiquetas <section>, no dentro. Aunque semánticamente hablando, en realidad no importa dónde quieras usarlos.

Si la lista de elementos de enlace son relevantes para los elementos encima de la etiqueta <hr> (lo que significa relevante para sus otros elementos dentro de la etiqueta <section>, entonces yo no recomiendo el uso de <hr> allí. En lugar de ello, el uso de CSS para diferenciar las fronteras y subrayados.

Si desea referencia adicional, he localizado para el usuario: http://html5doctor.com/small-hr-element/

Cheers, D