<section>
Une partie thématique d’un document, généralement avec son propre titre.
- Affichage
- block
- Balise fermante
- Obligatoire
- Contenu autorisé
- Contenu de flux
Exemple
#<section aria-labelledby="faq-title">
<h2 id="faq-title">Questions fréquentes</h2>
<p><strong>Ai-je besoin d’expérience ?</strong> Non, on commence de zéro.</p>
<p><strong>Combien de temps ça prend ?</strong> Vous construirez votre première page en une semaine.</p>
</section>Définition et utilisation
#L’élément <section> regroupe du contenu autour d’un même thème : un chapitre d’un article, un onglet dans une interface, ou un bloc « Tarifs » ou « FAQ » sur la page d’accueil. Une section devrait avoir un titre, car c’est lui qui indique de quoi parle cette partie.
La différence entre <section> et <article> est simple : un article est autonome, une section fait partie d’un ensemble plus grand. Et quand vous avez seulement besoin d’un conteneur pour le style, sans aucune signification, utilisez <div>.
Une section dont le nom est accessible aux technologies d’assistance (par exemple via aria-labelledby qui pointe vers son titre) devient une région vers laquelle les lecteurs d’écran permettent de passer rapidement.
Syntaxe
#<section>
<h2>Titre de la section</h2>
…
</section>Attributs
#Cet élément n’a pas d’attributs propres. Il accepte les attributs globaux, comme class, id ou hidden.
CSS par défaut
#La plupart des navigateurs affichent cet élément avec ces styles par défaut :
section {
display: block;
}Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Chaque section devrait avoir un titre. Une section sans titre est souvent le signe qu’un
<div>suffit. - Associez la section à son titre avec
aria-labelledby, pour que les lecteurs d’écran annoncent son nom.
Entrées associées
#- <section> vs <article> vs <div><article> est un contenu autonome, <section> est une partie thématique d’un ensemble plus grand, et <div> est un conteneur neutre sans aucune signification.
- <article>Un contenu autonome qui garde son sens une fois lu ou partagé séparément.
- <div>Un conteneur de bloc générique sans signification, pour grouper des éléments et les styliser.
- <main>Le contenu principal et unique de la page. Une seule instance visible par page.
- <aside>Un contenu secondaire, lié de façon lâche à son environnement : encadré, barre latérale, remarque.
- <h1>-<h6>Des titres à six niveaux, du plus important h1 au moins important h6. Ensemble, ils forment le plan de la page.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.