Eléments de structure du document en HTML5

‹HEADER›
‹NAV›
‹SECTION›	‹ASIDE›
‹ARTICLE›
‹FOOTER›

Ces nouveaux éléments sont là pour mieux structurer le document. Ils délimitent les différentes sections du document. Ces sections peuvent avoir des relations entre elles ou pas et on va utiliser ces éléments pour préciser tout cela.

Je vais utiliser l'élément Header pour construire l'en-tête d'une page ou l'entête d'une section. J'utiliserai donc Header à la place des traditionnels <div id='header'>.

Attention ici, l'utilisation de Header peut paraître faussement évidente. Il s'agit bien d'en-tête de page ou d'en-tête de section. On peut en particulier avoir plusieurs Header dans une page alors que l'on n'aurait pas eu plusieurs <div id='header'>.

Je vais utiliser l'élément Footer pour construire le pied de page ou le pied de section. Je pourrai remplacer aussi les traditionnels <div id='footer'>.

Je vais utiliser un élément Nav pour y placer un contenu qui sert à la navigation sur mon site. Typiquement tout ce qui est menu lié à la navigation et donc toutes les barres de navigation.

Sur les anciens sites, ceux construits avant HTML5, il faudra se servir de l'élément Nav pour remplacer les <div id='top-level-menu'>, les <div id='sidebar'> et/ou autres div contenant des éléments de navigation.

Le point clé pour savoir si je peux utiliser l'élément Article, c'est que le contenu doit avoir un sens, indépendamment de son contexte, c'est-à-dire lorsque tout le contenu environnant est enlevé.

Je vous propose de répondre à cette question pour essayer de caractériser les structures pouvant être balisées par Article.

Le contenu pourrait-il être extrait du document et conserver son sens ?

Vérifiez ensuite deux points :

1. Le contenu contient un titre qui permet de l'identifier.
2. Le contenu est listé dans un plan.

Spécification W3C de Article

L'élément Aside est utilisé pour un contenu complémentaire.

Deux cas de figures :

• Lorsque l'élément Aside est utilisé dans un élément Article, son contenu doit être spécifiquement lié à cet article (par exemple, un glossaire).
• Lorsque l'élément Aside est utilisé en dehors d'un élément Article, son contenu doit être lié au site (par exemple, un blog, et même de la publicité si ce contenu est lié à la page).

Je vous propose de répondre à cette question pour essayer de caractériser les structures pouvant être balisées par Aside.

Le contenu est-il complémentaire et lié à un autre contenu ou à la page ?

Spécification W3C de Aside

Je vous propose de répondre à cette question pour essayer de caractériser les structures pouvant être balisées par Section.

Le contenu correspond-il à un regroupement thématique ?

Vérifier ensuite deux points :

1. Le contenu contient un titre qui permet de l'identifier.
2. Le contenu est listé dans un plan.

Spécification W3C de Section

Attention, tous ces éléments de section ne sont pas des conteneurs génériques. On vient justement de voir que ce sont des conteneurs sémantiques. Donc lorsqu'un élément est nécessaire uniquement à des fins de style, il faut continuer à utiliser l'élément div.