Qual é a estrutura mais semanticamente correta de uma página de blog usando tags HTML5?

9

Eu gostaria de Grokar a natureza última de <aside>, <section>, <article>.

Qual é a melhor e mais semanticamente correta estrutura de uma página de blog usando tags HTML5?

Devo colocar a barra lateral dentro de um <aside>? Ou isso pertence a um <section>(como <aside>deve ser usado para anúncios, citações curtas e outros)?

Como devo apresentar o recurso principal, o post do blog? Como uso <article>corretamente?

Como devo marcar as tags do artigo?

Wabbitseason
fonte

Respostas:

7

Você deseja usar <article>para postagens do blog. Mark Pilgrim tem uma explicação muito boa de como usar cada tag. Ele também explica como marcar o articlelogo abaixo da lista de definições em seu site. Este é um livro fantástico para aprender HTML 5 e CSS.

"O elemento article representa um componente de uma página que consiste em uma composição independente em um documento, página, aplicativo ou site e que se destina a ser independentemente distribuível ou reutilizável, por exemplo, em organização."

Asideé para elementos "tangencialmente relacionados" e o sectionrepresenta "representa um documento genérico ou uma seção de aplicativo".

citadelgrad
fonte
2

Pois <aside>, pense nisso como o lado teatral: a história é colocada em espera para explicar algo ao público, girando na tangente por um pouco antes de voltar ao foco principal. Por exemplo:

<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>

Exemplo terrível, mas válido. Provavelmente, será útil para itens como aspas e outras tangentes relevantes para o artigo, mas como uma tag puramente semântica , os anúncios geralmente não pertencem.

Um sistema de anúncios orientado por palavras-chave não se preocupa em ajustar semanticamente seu conteúdo, está mais interessado em corresponder informações demográficas. Se o seu <article>é apenas sobre PHP, e ele puxa anúncios relacionados ao Python / Perl / Java (será, em algum momento), você <aside>acabou de perder o significado. É melhor colocar esses itens em outro lugar da página.

tadamson
fonte
+1 por colocar um sorriso no meu rosto e responder a uma pergunta minha que eu tinha.
Jason