¿Cuál es la estructura semánticamente correcta de una página de blog que usa etiquetas HTML5?

9

Me gustaría asimilar la naturaleza última de <aside>, <section>, <article>.

¿Cuál es la mejor estructura semánticamente correcta de una página de blog que usa etiquetas HTML5?

¿Debo poner la barra lateral dentro de un <aside>? ¿O esto pertenece más bien a un <section>(como se <aside>debe usar para anuncios, citas cortas y demás)?

¿Cómo debo presentar la característica principal, la publicación del blog? ¿Cómo lo uso <article>correctamente?

¿Cómo debo marcar las etiquetas del artículo?

Wabbitseason
fuente

Respuestas:

7

Desea utilizar <article>para publicaciones de blog. Mark Pilgrim tiene una muy buena explicación de cómo usar cada etiqueta. También explica cómo marcar articlejusto debajo de la lista de definiciones en su sitio. Este es un libro fantástico para aprender HTML 5 y CSS.

"El elemento del artículo representa un componente de una página que consiste en una composición autónoma en un documento, página, aplicación o sitio y que tiene la intención de ser distribuible o reutilizable independientemente, por ejemplo, en sindicación".

Asidees para elementos "relacionados tangencialmente" y sectionrepresenta "representa un documento genérico o una sección de aplicación".

citadelgrad
fuente
2

Por <aside>ejemplo, piense en eso como lo de lado teatral: la historia se pone en espera para explicar algo a la audiencia, desviándose por una tangente por un momento antes de volver al foco principal. P.ej:

<article>
     <p>A horse walks into a bar.</p>
     <p>The bartender says, "Why the long face?"</p>
     <aside>Not because it was sad, horses just have long faces.</aside>
</article>

Terrible ejemplo, pero válido. Lo más probable es que sea útil para cosas como comillas y otras tangentes relevantes para el artículo, pero como etiqueta puramente semántica , los anuncios generalmente no pertenecen.

Un sistema de anuncios basado en palabras clave no se preocupará por ajustar semánticamente su contenido, está más interesado en hacer coincidir los datos demográficos. Si <article>solo se trata de PHP, y extrae anuncios relacionados con Python / Perl / Java (lo hará, en algún momento), <aside>acaba de perder su significado. Es mejor ponerlos en otra parte de la página.

tadamson
fuente
+1 por poner una sonrisa en mi rostro y responder una pregunta que tenía.
Jason