<section> : l'élément de section générique
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
L'élément HTML <section> représente une section générique et autonome d'un document, qui n'a pas d'élément sémantique plus spécifique pour la représenter. Les sections doivent toujours comporter un titre, sauf très rares exceptions.
Exemple interactif
<h1>Choisir une pomme</h1>
<section>
<h2>Introduction</h2>
<p>
Ce document propose un guide pour vous aider dans la tâche importante de
choisir la bonne pomme.
</p>
</section>
<section>
<h2>Critères</h2>
<p>
Il existe de nombreux critères à prendre en compte pour choisir une
pomme : taille, couleur, fermeté, douceur, acidité...
</p>
</section>
h1,
h2 {
margin: 0;
}
Attributs
Cet élément inclut uniquement les attributs universels.
Notes d'utilisation
Comme mentionné ci-dessus, <section> est un élément de sectionnement générique et ne doit être utilisé que s'il n'existe pas d'élément plus spécifique pour le représenter. Par exemple, un menu de navigation doit être englobé dans un élément <nav>, mais une liste de résultats de recherche ou une carte et ses contrôles, qui n'ont pas d'élément spécifique, peuvent être placés dans un élément <section>.
Considérez aussi les cas suivants :
- Si le contenu de l'élément représente une unité autonome et indépendante qui a du sens en tant que pièce syndiquée (par exemple, un article de blog, un commentaire de blog ou un article de journal), l'élément
<article>sera plus approprié. - Si le contenu représente une information tangente utile qui accompagne le contenu principal, mais n'en fait pas directement partie (comme des liens associés ou une biographie d'auteur·ice), utilisez
<aside>. - Si le contenu représente la zone principale d'un document, utilisez
<main>. - Si vous utilisez l'élément uniquement comme conteneur de mise en forme, utilisez plutôt
<div>.
Pour récapituler, chaque <section> doit être identifiée, généralement en incluant un titre (élément h1 à h6) comme enfant de l'élément <section>, autant que possible. Voir ci-dessous des exemples où un <section> peut apparaître sans titre.
Exemples
Exemple simple d'utilisation
Avant
<div>
<h2>Mon super titre</h2>
<p>Beaucoup de contenu génial</p>
</div>
Résultat
Après
<section>
<h2>Mon super titre</h2>
<p>Beaucoup de contenu génial</p>
</section>
Résultat
Utiliser une section sans titre
Les circonstances où vous pouvez voir <section> utilisé sans titre se trouvent généralement dans des sections d'applications web ou d'interfaces utilisateur, plutôt que dans des structures de documents traditionnelles. Dans un document, il n'est pas vraiment logique d'avoir une section distincte de contenu sans titre pour décrire son contenu. Ces titres sont utiles pour tous les lecteurs·rices, mais particulièrement pour les utilisateur·ice·s de technologies d'assistance comme les lecteurs d'écran, et ils sont aussi bénéfiques pour le référencement.
Considérez cependant un mécanisme de navigation secondaire. Si la navigation globale est déjà englobée dans un élément <nav>, il est possible d'entourer un menu précédent/suivant dans un élément <section> :
<section>
<a href="#">Article précédent</a>
<a href="#">Article suivant</a>
</section>
Ou bien une barre de boutons pour contrôler votre application ? Celle-ci n'a pas forcément besoin d'un titre, mais reste une section distincte du document :
<section>
<button class="reply">Répondre</button>
<button class="reply-all">Répondre à tous</button>
<button class="fwd">Transférer</button>
<button class="del">Supprimer</button>
</section>
Résultat
Selon le contenu, inclure un titre peut aussi être bénéfique pour le référencement, c'est donc une option à considérer.
Résumé technique
| Catégories de contenu | Contenu de flux, contenu sectionnant, contenu tangible. |
|---|---|
| Contenu autorisé | Contenu de flux. |
| Omission de balises | Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires. |
| Parents autorisés |
Tout élément qui accepte du
contenu de flux. Un élément <section> ne peut pas être le descendant
d'un élément <address>.
|
| Rôle ARIA implicite |
region
si l'élément a un
nom accessible, sinon
generic
|
| Rôles ARIA autorisés |
alert, alertdialog,
application, banner,
complementary,
contentinfo, dialog,
document, feed,
log, main,
marquee, navigation,
none, note,
presentation, search,
status, tabpanel
|
| Interface DOM | HTMLElement |
Spécifications
| Specification |
|---|
| HTML # the-section-element |
Compatibilité des navigateurs
Voir aussi
- Les autres éléments HTML relatifs au plan du document :
<body>,<nav>,<article>,<aside>,<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<hgroup>,<header>,<footer>,<address> - Structure et sections d'un document HTML
- ARIA : le rôle
region - Pourquoi choisir l'élément HTML5 article plutôt que section ? | Bruce Lawson (angl.)