L'élément section permet de regrouper des éléments logiquements liés.
Une section remplacera avantageusement un div qui n'est pas porteur de signification
Par exemple une page constituée de recettes de cuisine pourra contenir une section pour les entrées, une autre pour les plats principaux et une dernière pour les desserts
L'élément article marque un contenu qui se suffit à lui tout seul
Un article peut contenir des sections
Une recette de cuisine particulière peut constituer un article pouvant être décomposé en trois sections, l'une pour les généralités, la seconde pour les ingrédients et la troisième pour la préparation
Inversement une section peut contenir plusieurs articles : ainsi la section consacrée aux desserts est constituée de plusieurs articles correspondant chacun à une recette de dessert
L'élément header permet de définir un contenu servant d'entête.
L'élément header ne doit pas contenir des sections, d'autres headers ou footers
Le header d'un article consacré à une recette pourrait contenir, l'intitulé de la recette et un image par exemple
L'élément footer permet de définir un contenu servant de pied de page, de section ou d'article
L'élément footer ne doit pas contenir des sections, d'autres headers ou footers
Le footer d'un article consacré à une recette pourrait contenir, les références à l'auteur de la recette, une date de publication par exemple
L'élément nav sert à identifier une zone de navigation et remplacera avantageusement un div id="menu"
nav rassemble les liens vers d'autres pages dans le site ou vers une ancre de la page courante
nav pourrait contenir des liens vers les différentes recettes de notre page exemple
L'élément aside permet de désigner une partie non indispensable au contenu d'une page, une information annexe
L'élément aside est souvent présenté latéralement
Sur un site de recettes, un élément aside peut contenir des liens vers des livres de recette, d'autres sites dédiés à la cuisine, des bonnes adresses de restaurants, les propriétés diététiques d'un ingrédient ... etc
L'élément main permet de regrouper le contenu essentiel d'une page.
Une seule occurence de main est autorisée dans une page
main ne peut pas figurer au sein d'une section, d'un article, d'un élément nav ou aside
L'élément figure permet de regrouper un ou plusieurs éléments avec une légende (figcaption)
On peut y intégrer une, image, une video, un tableau ou tout autre élément
L'élément figcaption est enfant de l'élément figure et peut apparaitre avant ou après le code à légender
Les versions d'internet Explorer antérieures à IE9 ne reconnaissent pas ces éléments et ne permettent donc aucune application de styles CSS
Il existe cependant des solutions alternatives permettant la reconnaissance de ces éléments par les anciennes versions d'IE
On écrit le script suivant dans un fichier "html5ie.js"
On inclut le fichier "html5ie.js" dans l'élément head avant toute utilisation de l'une des balises concernées
Google propose un script un peu plus élaboré permettant la reconnaissance des nouveaux éléments : html5shim
Il suffit d'inclure conditionnellement ce script dans l'élément head
Les nouveaux éléments de structure se comportent comme des éléments inline par défaut
Il est donc nécessaire d'ajouter la déclaration CSS suivante :
Il existe des solutions un peu plus lourdes n'utilisant pas Javascript
Copyright Gabriel Braun 2007