<section>

Permet de définir une section d'une page HTML.
2 min de lecture
Believemy logo

La balise <section> est utilisée en HTML pour définir une section autonome dans un document.

Bon à savoir

Elle permet de regrouper des contenus ayant un thème commun, facilitant ainsi la structuration de la page pour les moteurs de recherche. 😉

 

Structure et syntaxe de la balise <section>

Structure et syntaxe de base

Voici la syntaxe de base d’une balise <section> :

HTML
<section>
  Contenu de la section ici
</section>

 

Exemple d’utilisation

Voici un exemple typique d'utilisation de la balise <section> :

HTML
<section>
  <h2>Les avantages de l'apprentissage en ligne</h2>
  <p>L'apprentissage en ligne offre une grande flexibilité pour les étudiants.</p>
</section>

Dans cet exemple, la balise <section> est utilisée pour regrouper un titre et un paragraphe ayant pour thème l'apprentissage en ligne.

 

Attributs

La balise <section> accepte les attributs HTML classiques comme :

  • class : pour appliquer des styles CSS.
  • id : pour identifier un conteneur unique.
  • style : pour appliquer des styles inline.

 

Bonnes pratiques

Utilisez la balise <section> pour structurer des parties du contenu ayant un thème ou un sujet particulier. Cela permet de rendre le contenu plus compréhensible, tant pour les utilisateurs que pour les moteurs de recherche.

Évitez également d'utiliser <section> pour des éléments qui ne sont pas des sections indépendantes, tels que des éléments de navigation ou des en-têtes de page. Dans ces cas, il est préférable d'utiliser des balises comme <header> ou <nav>.

 

Différence avec d’autres balises similaires

  • <article> : La balise <article> est utilisée pour marquer un contenu autonome, mais contrairement à <section>, elle représente un élément indépendant qui pourrait être redistribué, comme une publication ou bien un article de blog.
  • <aside> : La balise <aside> est utilisée pour marquer un contenu secondaire, souvent en relation avec le contenu principal, mais sans en être une partie intégrante. Contrairement à <section>, <aside> n’est pas conçu pour regrouper des contenus ayant un thème spécifique.

 

Compatibilité des navigateurs

La balise <section> est prise en charge par tous les navigateurs modernes.

NavigateurCompatibilité
ChromeOui
FirefoxOui
SafariOui
EdgeOui
Internet ExplorerOui

Termes connexes

Découvrez notre glossaire HTML et CSS

Parcourez les termes et définitions les plus couramment utilisés dans le domaine du développement HTML et CSS.

Partager cet article

Tu veux nous aider ? Fais un lien vers cet article sur tes réseaux ou encore mieux : sur ton site, dans un article ou dans ta newsletter.