Structure sémantique d’une page Web

Un extrait du site AlsaCréations :

Les éléments de section HTML5

Les éléments de section (section, article, nav, aside, header, footer) segmentent des portions du document, qui possèdent une valeur sémantique particulière ; contrairement à des éléments génériques comme span ou div qui ont un rôle totalement neutre, et ne servent qu’à regrouper d’autres éléments HTML pour leur affecter un style CSS commun.

Liste récapitulative des éléments de section HTML5

Le tableau suivant récapitule les nouveaux éléments de section et leur usage le plus commun, tel que décrit par la spécification.

NomDétails
<section>Section générique regroupant un même sujet, une même fonctionnalité, de préférence avec un en-tête, ou bien section d’application web
<article>Section de contenu indépendante, pouvant être extraite individuellement du document ou syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension
<nav>Section possédant des liens de navigation principaux (au sein du document ou vers d’autres pages)
<aside>Section dont le contenu est un complément par rapport à ce qui l’entoure, qui n’est pas forcément en lien direct avec le contenu mais qui peut apporter des informations supplémentaires.
<header>Section d’introduction d’un article, d’une autre section ou du document entier (en-tête de page).
<footer>Section de conclusion d’une section ou d’un article, voire du document entier (pied de page).

Détails d’une structure HTML5 :