204 – Les éléments de structure

L’élément <header>

Le nouvel élément L’élément <header> permet d’insérer une zone d’affichage pour les en-têtes. Cet en-tête peut être défini pour la page ou pour une autre zone d’affichage : article, barre latérale.
Il faut considérer cet élément comme utilisable à deux niveaux :
au niveau de la page, c’est le classique en-tête de page, souvent placé en haut de l’écran, avec un logo, un slogan, une barre de navigation principale.
au niveau des contenus, cela permet d’avoir une zone d’introduction au contenu qui va suivre.

L’élément <footer>

Le nouvel élément <footer> permet d’insérer une zone d’affichage pour les pieds de page. Nous retrouvons la même sémantique que pour les en-têtes. Ces pieds de page peuvent être définis pour la page ou pour une autre zone d’affichage, ou pour un article.

L’élément <nav>

L’élément <nav>, comme son nom le laisse supposer, est dédié à l’affichage d’une navigation avec des liens hypertextes. Mais attention, ne vous sentez pas obligé de n’avoir qu’une seule zone de navigation par page ou de créer autant d’éléments que vous avez de navigations dans vos pages, du moment que chacun d’entre eux est identifié. L’élément est plutôt dédié à la navigation principale du site, à la création de liens entre les pages du site.

L’élément <section>

L’élément permet de regrouper des éléments partageant une même thématique. Cela permet de regrouper dans un même élément un contenu, avec son en-tête et son pied de page.

L’élément <article>

L’élément <article> permet d’insérer un contenu autonome, car il peut être réutilisé ailleurs dans le site, sans que sa compréhension soit nulle.

Un article peut parfaitement avoir un en-tête (<header>), un pied de page (<footer>) et des titres (<hx>).

L’élément <aside>

L’élément <aside> permet d’afficher un contenu lié au contenu auquel il est associé. Cela peut correspondre à des barres latérales (sidebar), à des zones de widgets, à des compléments sur des articles.

L’élément <main>

Dernier arrivé dans les brouillons du W3C, l’élément <main> permet de cibler le contenu principal de la page.
Le W3C indique des restrictions pour l’utilisation de l’élément :

  • un seul élément par page,
  • il ne doit pas être utilisé à l’intérieur (élément descendant) des éléments , , , ou ,
  • il devrait être associé avec le role main () pour une meilleure accessibilité des sites web.
  • vec le HTML5.2, nous pouvons utiliser plusieurs éléments <main> dans la même page..

Les boîtes <div>

Ce n’est pas parce que vous utilisez du HTML5, que vous devez abolir l’utilisation des boîtes ! Elles ont toujours leur utilité !