Quelle structure HTML sémantique pour un blog culinaire avec recettes ?

[mehdi2001]

Je développe un blog de recettes et je veux faire ça propre niveau HTML. Vous utiliseriez quoi comme balises pour une fiche recette ? J'hésite entre <article> + <section> ou carrément <div> avec des aria-roles.

[le_julien]

100% sémantique ! Va voir schema.org/Recipe, c'est le standard. Perso je fais : <article> principal, avec <time> pour la durée, <ul> pour les ingrédients et <ol> pour les étapes. Google adore ça.

[admin_sys_gaming]

Attention aux aria-roles si tu ne maîtrises pas l'accessibilité. @123 a raison, reste basique mais efficace. J'ajouterais des microdatas pour le temps de prép et le niveau de difficulté.

[mehdi2001]

Merci pour schema.org ! Par contre vous mettez les ingrédients dans quel type de conteneur ? Une <section> ou une <div> avec class="ingredients" suffit ?

[kernelpanic59]

Section c'est overkill pour des ingrédients. Div + class ou même mieux : <ul itemscope itemtype="http://schema.org/ItemList">. Teste ton code avec le validateur W3C avant de publier !

[le_julien]

Je confirme pour <ul>. Petite astuce : utilise des <meta> pour les quantités (ex : <meta itemprop="amount" content="250">). Ça passe mieux dans les snippets Google.