HTML 5 - 2.6 : Regrouper des éléments dans des conteneurs

Bienvenue dans ce cours d'HTML5. Cette leçon montre comment regrouper des éléments dans des conteneurs sémantiques. HTML5 propose plusieurs balises spécialisées qui donnent du sens à la structure de votre page, plutôt que d'utiliser uniquement des <div> génériques. Par exemple, si vous avez une liste de liens représentant une navigation, vous pouvez l'entourer d'une balise <nav> : c'est le conteneur sémantique dédié à la navigation.

Les principales balises de conteneur HTML5

<header> : représente l'en-tête, le haut du site. Peut contenir le titre, le logo, etc.
<footer> : représente le pied de page. On y retrouve souvent le copyright, les liens de contact, les réseaux sociaux. Par exemple, un <p>Copyright 2024</p> ou un lien Contact.
<nav> : contient les éléments de navigation principaux.
<main> : contient le corps du site, la partie principale du contenu.
<article> : utile pour représenter un contenu autonome, comme un article de blog ou un produit sur un site e-commerce. Chaque article aura sa propre balise <article>.
<section> : regroupe des éléments liés en sections thématiques.
<aside> : utilisé pour un contenu secondaire, lié au corps du site mais pas essentiel — par exemple une note ou un encart latéral. Notre « Nota Bene » peut s'y placer.

Plusieurs balises de chaque type peuvent coexister : par exemple plusieurs <header> ou plusieurs <footer> à l'intérieur d'<article>. Enfin, pour les cas où aucune balise sémantique ne convient, on utilise la balise <div> : c'est un conteneur générique sans signification particulière, à utiliser en dernier recours quand vous devez regrouper des éléments mais qu'aucune balise sémantique n'est appropriée. L'utilisation de ces balises rend le code plus lisible, améliore l'accessibilité (les lecteurs d'écran comprennent mieux la structure) et facilite le référencement par les moteurs de recherche. Voilà pour les différentes balises de conteneur en HTML5 !

En résumé

Cette leçon explique comment structurer une page HTML en regroupant les éléments dans des conteneurs sémantiques. Elle détaille les balises conteneurs essentielles (header, nav, main, footer, article, section, aside) avec leurs usages respectifs, et montre sur un exemple concret comment les assembler pour créer la structure d'un site.

Points clés

Les balises sémantiques (header, nav, main, footer) définissent la structure logique d'une page et améliorent l'accessibilité
La balise <article> encapsule un contenu autonome, utile notamment en e-commerce pour chaque produit
La balise <aside> regroupe les éléments secondaires ou complémentaires (nota bene, encadrés informatifs)
La balise <section> délimite des zones de contenu thématiquement liées
La balise <div> est un conteneur générique sans sémantique, à utiliser uniquement en dernier recours quand aucune balise spécifique ne convient

Questions fréquentes

Quand utiliser <header> et <footer> ?

<header> se place au haut du site et contient le titre, le logo ou l'image de marque. <footer> se place au bas et accueille le copyright, les liens de contact, les réseaux sociaux et autres informations de pied de page.

Quelle est la différence entre <section> et <article> ?

<section> regroupe des éléments liés autour d'une thématique commune, tandis que <article> encapsule un contenu autonome et complet qui pourrait être republié indépendamment (un article de blog, un produit en e-commerce).

Pourquoi préférer les balises sémantiques à <div> ?

Les balises sémantiques (nav, main, article, section, aside) donnent du sens à la structure du document pour les navigateurs et lecteurs d'écran, améliorant l'accessibilité et le référencement. <div> est un conteneur neutre sans information de sens.