Quelle est la structure la plus sémantiquement correcte d'une page de blog utilisant des balises HTML5?


9

Je voudrais assimilez la nature ultime de <aside>, <section>, <article>.

Quelle est la meilleure structure, la plus sémantiquement correcte, d'une page de blog utilisant des balises HTML5?

Dois-je mettre la barre latérale à l'intérieur d'un <aside>? Ou cela appartient-il plutôt à un <section>(comme cela <aside>devrait être utilisé pour les publicités, les citations courtes et autres)?

Comment dois-je présenter la fonctionnalité principale, le billet de blog? Comment utiliser <article>correctement?

Comment dois-je annoter les balises d'article?

Réponses:


7

Vous souhaitez utiliser <article>pour les articles de blog. Mark Pilgrim a une très bonne explication sur la façon d'utiliser chaque balise. Il explique également comment baliser articlejuste en dessous de la liste des définitions sur son site. Ceci est un livre fantastique pour apprendre HTML 5 et CSS.

"L'élément article représente un composant d'une page qui consiste en une composition autonome dans un document, une page, une application ou un site et qui est destiné à être distribué ou réutilisé indépendamment, par exemple dans la syndication."

Asideest pour les éléments "tangentiellement liés" et le sectionreprésente "représente un document générique ou une section d'application".


2

Car <aside>, pensez à cela comme au côté théâtral: l'histoire est suspendue pour expliquer quelque chose au public, déviant brièvement sur une tangente avant de revenir à l'objectif principal. Par exemple:

<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 exemple, mais valide. Il y a de fortes chances qu'il soit utile pour des choses comme les guillemets et autres tangentes pertinentes à l'article, mais en tant que balise purement sémantique , les publicités n'appartiennent généralement pas.

Un système publicitaire basé sur des mots clés ne se souciera pas d'adapter sémantiquement votre contenu, il est plus intéressé par la correspondance des données démographiques. Si votre <article>ne concerne que PHP, et qu'il tire des publicités liées à Python / Perl / Java (il le fera, à un moment donné), vous <aside>venez de perdre son sens. Vous feriez mieux de les mettre ailleurs sur la page.


+1 pour avoir mis un sourire sur mon visage et répondu à une de mes questions que j'avais.
Jason
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.