semantica - HTML semántico de una lista de artículos
title html attribute (4)
Como otras personas dijeron, creo que cada artículo debe estar marcado con una etiqueta de article .
También sugiero rodear toda la lista con una etiqueta aside . Entonces, si tiene un artículo principal en la página (rodeado de main ), no se verá afectado por los otros artículos.
Aquí hay un buen artículo sobre aside .
En un índice típico de artículos (como un blog sin extracto) como esta imagen:
esos elementos deben ser una lista ( <ul><li> ) o simplemente divs?
Y también, ¿deberían ser figura / figura? Porque tendría algún sentido, pero también ... la imagen es parte de un artcile, no el contenido principal, así que quizás el título / descripción no sea el título de la imagen, sino el título del artículo.
¿Qué piensas?
EDITAR: un ejemplo en vivo - https://news.google.com/?hl=en
Esta es una pregunta de opinión por lo que se trata de preferencias. Según su imagen, usaría un <ul> <li> aunque podría obtener el mismo resultado usando divs.
Si cada elemento representa un artículo, cada uno debe representarse utilizando elementos <article> .
Si cree que es una lista de artículos ordenada o desordenada, entonces podría usar los elementos <ol> o <ul> respectivamente.
Recomendaría mantener el marcado lo más simple posible y tan complejo como sea necesario, por lo que hay algo como:
<div>
<article>
<img>
<div>…</div>
</article>
<article>
<img>
<div>…</div>
</article>
…
</div>
Usaría un article para cada fragmento (es decir, un teaser de noticias).
Cada article contiene un elemento h1 para el encabezado, un elemento img para la imagen y p elemento (s) para el texto.
Como es probable que desee vincular a una versión completa, puede incluir todos los elementos en a elemento (que se permite en HTML5) o solo el encabezado, etc.
Así podría verse como:
<article>
<h1><a href="" title=""><!-- news title --></a></h1>
<img src="" alt="" />
<p><!-- news description --></p>
</article>
Solo usa la figure si esta imagen en sí debe tener un título separado. La descripción de la noticia (aquí contenida en p ) por lo general no es el título de esa imagen.
Usted puede cambiar el orden de los niños del article . Gracias a la forma en que funcionan los elementos de sección, el encabezado no tiene que ser el primer elemento.
Puedes usar una ul , pero no es necesario. Sin embargo, solo debe usarse si el orden es realmente significativo para comprender el contenido (es decir, un orden diferente cambiaría el significado del documento). Ejemplo típico: si los elementos se clasifican por relevancia (por ejemplo, el teaser más relevante en la parte superior), debe usar ol .
Respecto a tu pregunta si el teaser debe ser un article :
No confunda el article (elemento HTML5) con el término "artículo" (idioma inglés). article tiene una definition separada que no necesariamente tiene que ver con la comprensión del término "artículo".
El teaser también debe ser un article : el article teaser y el article texto completo son article diferentes , aunque se refieren a la misma entidad.