Les éléments de structure sont uniquement là pour donner un sens précis au contenu qu'ils définissent et ne sont pas affichés d'une façon particulière par le navigateur. Par exemple, l'élément aside qui définit du hors-texte "à côté" sera affiché dans le flot normal du document et pas du tout sur les côtés. C'est de la responsabilité de l'auteur de formatter ces éléments comme il l'entend avec des règles de styles CSS pour définir marges, retraits, encadrement, taille de police, etc.
A noter que seul l'élément de structure body est obligatoire dans une page et que des pages peuvent très bien être construites sans les autres éléments.
body
L'élément body définit le contenu du document. C'est le conteneur de tous les autres éléments qui sont affichés par le navigateur.
Il ne doit y avoir qu'un seul élément body dans une page.
Il ne devrait rien y avoir entre la balise de fermeture </body>
et la balise de fermeture du document </html>.
header
L'élément header définit l'en-tête (ie le début) de la structure dans laquelle il se trouve. Il est normalement destiné à accueillir des éléments de titre et constitue ce qui est appelé la titraille dans la typographie ou le journalisme.
L'élément de structure qui contient header
peut être n'importe quel autre élément de structure. Il peut donc y
avoir plusieurs éléments header
dans un même document.
Si l'élément de structure est l'élément body, header
définira l'en-tête de la page.
footer
L'élément footer définit le pied (ie la fin) de la structure dans laquelle il se trouve. Il peut donc y avoir plusieurs éléments footer dans un même document.
L'élément de structure qui contient footer
peut être n'importe quel autre élément de structure.
Si l'élément de structure est l'élément body, footer
définira le pied de page.
nav
L'élément nav définit un bloc contenant les liens principaux permettant la navigation sur le site dans son entier ou sur des parties d'une page qui serait très longue.
nav ne doit pas être utilisé pour tous les groupements de liens que l'on peut avoir. Par exemple dans le pied de page (footer), on trouvera souvent des liens sur des éléments juridiques. Le W3C recommande de ne pas utiliser un élément nav pour regrouper ces liens.
main
L'élément main définit le bloc principal de la page, celui avec le contenu à proprement parler.
Il ne devrait y avoir qu'un élément main par page, et cet élément main devrait être un enfant de l'élément body : il ne devait donc pas y avoir d'élément main dans d'autres éléments de structure (par exemples dans article ou dans section
L'élément main ne devrait avoir du contenu unique dans tout le site. Les en-têtes, pieds de page et hors-textes latéraux n'en font donc pas partie.
section
L'élément section définit un bloc dont le contenu est relié au même thème. La distinction avec un article donne lieu à une nombreuse littérature sur le Web (exemple).
Il me semble que pour faire la distinction on peut prendre l'analogie d'un journal :"
- un journal contient plusieurs sections : la section politique, la section culture, la section sports, etc
- chacune des sections contient des plusieurs articles
Une section ne contient pas obligatoirement un ou des articles. Une section peut très bien être le seul élément structurel d'une partie de contenu.
Si un article (ou un hors-texte latéral) est très long, on peut aussi utiliser l'élément section pour découper ce contenu en thèmes différents.
Etant donné le caractère de regroupement thématique de cet élément, il est tout à fait possible qu'il contienne un en-tête fait avec un élément header et un pied de section fait avec un élément footer.
article
L'élément article définit un bloc dont le contenu doit pouvoir être diffusé dans sa totalité de façon autonome et indépendante. Un article de journal ou de revue, un billet dans un blog, sont des exemples type d'éléments article.
La spécification HTML dit aussi que article devrait être utilisé pour les "widgets" comme ceux qui proposent la météo, les cours de la bourse, des horleges et autres caculatrices.
Un article peut très bien être le seul élément structurel d'une partie de contenu, c'est à dire un enfant de body.
Remarque: pour ne pas simplifier les choses (à mon avis), le W3C dit qu'un article peut contenir des articles et donne comme exemple un billet de blog avec les commentaires des lecteurs. Les commentaires devraient être considérés comme des articles parce qu'ils sont relatifs au contenu de l'article parent. Il me semble qu'il y a une confusion qui est introduite car quelque chose de "relatif à" n'est pas indépendant.
Etant donné que cet élément devrait définir du contenu "autonome", il est tout à fait possible qu'il contienne un en-tête fait avec un élément header et un pied d'article fait avec un élément footer.
aside
L'élément aside doit être utilisé comme conteneur pour ce qui n'a pas de relation vraiment directe avec le contenu principal de la structure dans laquelle il se trouve ("hors-texte" ou "à côté").
A priori et bien que le nom de l'élément y fasse immédiatement penser, un élément aside n'est pas fait spécifiquement pour être placé sur le côté droit ou gauche de la structure dans laquelle il se trouve. Le terme "à côté" est à rapprocher de son contenu qui complète ou est périphérique du contenu principal.
Cet élément est néanmoins toujours positionné à droite ou à gauche de la page et son contenu est très souvent consitué par des encarts de publicité ou un regroupement d'éléments nav qui constituent des menus.
h1 à h6
Les éléments h1, h2, h3, h4, h5, h6 servent à définir des titres d'importance décroissante : h1 repésente le plus gros titre et h6 le plus petit sous-titre.
Les navigateurs utilisent par défaut des hauteurs différentes de police et de marges pour monter cette hiérarchie. Ce sont les seuls éléments de structure qui ont une mise en forme par défaut particulière. L'auteur peut bien sûr formatter comme il l'entend ces éléments avec des règles de style CSS. Il convient toutefois de garder la notion de hiérarchie visuelle (et structurelle) de ces éléments.