Sémantique HTML5

Bonjour,

Je lis depuis quelque temps des articles qui traitent d'HTML5 et souhaite me lancer dans le refonte d'un site internet afin de tester les nouvelles possibilités de celui-ci (couplé à CSS3)

Cependant avec l'arrivé des nouvelles balises (header, footer,...) je ne sais pas exactement comment structurer ce dernier.

Voici un schéma (très rapide) du design qui sera mis en place :
http://img594.imageshack.us/img594/5291/designfw.png

J'avais lu (me semble-t-il) que l'on ne devait pas utiliser la balise HEADER a même un section. Quel méthode utiliser pour l'encadré jaune ?

Concernant le(s) menus, je ne sais pas trop comment mis prendre. Une section ou aside qui englobe plusieurs nav. Plusieurs section ou aside,... . Quel est selon vous la meilleurs façon de procéder ?

Merci d'avance,
Cordialement,

Bonjour,

Je te recommande de te plonger dans html5doctor qui est très bien réalisé et documenté.

Tu peux - et plus : tu dois - utiliser header pour ce bloc jaune. L'élément header est chargé de regrouper les titres et informations principales de n'importe quelle section de document : c'est donc également valable pour un simple article, un aside ou une div.

Bonne continuation !

Salut,

Mimosa693 a écrit :
J'avais lu (me semble-t-il) que l'on ne devait pas utiliser la balise HEADER a même un section

Tu as dû te tromper, toute section peut avoir un header, et un footer. Pour ton bloc jaune, s'il contient du matériel d'introduction, de présentation de la section (titres, etc.), ben c'est clairement un <header>, comme le dit Ten.

Mimosa693 a écrit :
Concernant le(s) menus [...] Une section ou aside

Tout dépend du contenu. <aside> est une section, considérée comme accessoire, pas vitale (au site si elle est enfant de body, à la section sinon). Si c'est le cas de tes menus, go.

Mimosa693 a écrit :
... qui englobe plusieurs nav

Les <nav> représentent des blocs de navigation principale (au niveau du site, ou de la section dans laquelle elle se trouvent). Du coup ça ne colle pas très bien avec <aside>... Si donc ce sont des menus accessoires (style les blocs catégories, tags, archives, etc, d'un blog), de simples <ul> feront l'affaire, je pense.

Merci pour vos retours.

Concernant les menus, il s'agit effectivement de lien classé par catégorie (un menu = une catégorie avec des liens)

Du coup, je pense partir sur un <aside> avec des listes (<ul>) par catégorie. C'est au final se qui me semble le plus simple a gérer pour le rendu sur mobile par la suite.

La réponse a été donnée, mais j’ajoute qu’il suffit d’interpréter les noms des éléments, qui sont assez bien attribués. “Aside”, en Anglais, signifie «à part», «de coté», et c’est même encore plus fort que ça si on se réfère à la définition donnée par le dictionnaire Anglophone Merriam-Webster : Aside - Definition (merriam-webster.com), ici, ça signifie carrément la mise à l’écart. Donc oui, aside, c’est pour ce qui est clairement optionnel.
Modifié par hibou57 (12 Mar 2013 - 23:46)