Depuis le début du langage HTML, il est possible de créer différentes sections dans une page grâce à la balise <div>. On peut l’utiliser pour l’en-tête, le menu, une barre latérale, le contenu principale, le pied-de-page, et pour différentes sous-sections sur différents niveaux à l’intérieur de ces sections principales.
Pour la mise en place de HTML 5, des études sur l’usage des identifiants les plus souvent utilisés sur cette balise <div> ont mis en avant que la plupart ont uniquement pour but de découper la page et de l’organiser en appliquant un style particulier de positionnement de dimensionnement. De nouvelles balises de sections ont donc été créées pour mieux découper sémantiquement le code HTML.
Balise de contenu principal
Le contenu principal d’une page HTML peut être inclut dans la balise <main>. Cette dernière n’a pas d’impact sur la structure du document, elle n’est donc pas similaire à la balise <body>. Mais devant forcément figurer à l’intérieur de la balise <body>, elle permet d’en cibler le contenu principal.
Balise d’en-tête et de pied-de-page
L’en-tête s’applique avec la balise <header> tandis que le pied-de-page s’applique avec la balise <footer>. Ces balises peuvent contenir des logos, images, textes, etc. Une page web peut contenir plusieurs en-têtes et pieds-de-page. Par exemple, si le site contient plusieurs sections / articles, chacun peut avoir son en-tête et son pied-de-page. Il s’agit d’une balise de type bloc.
La balise <nav> permet d’englober un élément de navigation tel qu’un menu ou une table des matières. Il peut y avoir plusieurs au sein d’une même page. Un menu horizontal en haut par exemple, avec un menu vertical sur le côté, avec des menus par articles, etc. Il s’agit d’une balise de type bloc.
Balise de sections, d’articles et de contenu complémentaire
La balise <section> permet de regrouper des contenus par thématique. On peut avoir par exemple sur une page d’accueil une section avec les dernières actualités, une section avec les derniers messages du forum, une section avec des statistiques, etc. Il s’agit d’une balise de type bloc.
La balise <article> permet d’englober une partie pouvant logiquement être prise à part du reste d’une page web. Une partie qui pourrait être isolée et reprise sur une autre site par exemple. Cela peut s’appliquer à une actualité, un article de blog, un commentaire sur un article, un widget, etc. Dans l’idée, un <article> possèderait un <header> avec un titre <h1> à <h6>. Il s’agit d’une balise de type bloc.
La balise <aside> permet d’isoler du contenu complémentaire au document. Il s’agit d’un contenu qui n’a pas de rapport direct avec le contenu. Une barre latérale par exemple, ou une description résumée de la page. Il s’agit d’une balise de type bloc.