Les balises sémantiques HTML sont des balises qui définissent la signification du contenu qu’elles contiennent.
Par exemple, les balises telles que <header>, <article> et <footer> sont des balises sémantiques HTML. Elles indiquent clairement le rôle du contenu qu’elles englobent.
En contraste, les balises comme <div> et <span> sont des exemples typiques d’éléments HTML non sémantiques. Elles servent uniquement de conteneurs pour le contenu sans fournir d’indication sur le type de contenu ni sur son rôle dans la page.
Types de balises sémantiques HTML
Les balises sémantiques peuvent définir diverses parties d’une page web.
Examinons les éléments sémantiques HTML les plus communs, regroupés en deux catégories en fonction de leur utilisation :
Balises sémantiques HTML pour la structure Balises sémantiques HTML pour le texte Balises sémantiques HTML pour la structure De nombreuses balises sémantiques HTML concernent la mise en forme d’une page.
Ces balises « structurelles » ont été introduites lors de la transition du HTML4 au HTML5. Par conséquent, elles sont également appelées balises sémantiques HTML5 ou éléments sémantiques HTML5.
Voici la liste exhaustive :<header> : Cette balise de titre définit le contenu considéré comme l’élément introductif d’une page ou d’une section.
<nav> : Utilisée pour les liens de navigation. Elle peut être incluse dans la balise <header>, mais des balises <nav> pour une navigation secondaire sont également courantes ailleurs sur la page.
<main> : Cette balise contient le contenu principal (également appelé corps) d’une page. Une seule balise de ce type doit être présente sur une page.
<article> : Cette balise délimite un contenu pouvant être indépendant de la page ou du site où il se trouve. Il ne s’agit pas nécessairement d’un « article de blog », mais plutôt d’un élément autonome utilisable dans divers contextes.
<section> : L’utilisation de <section> permet de regrouper des contenus étroitement liés par un thème commun. Une balise <section> diffère d’une balise <article>. Elle ne constitue pas une entité autonome, mais fait partie d’un tout.
<aside> : L’élément « aside » indique un contenu moins central. Souvent utilisé pour les barres latérales, soit des zones fournissant des informations complémentaires, mais non essentielles.
<footer> : Employé en bas d’une page, cette section comprend généralement des coordonnées, des informations sur les droits d’auteur et des éléments de navigation pour le site.
Balises Sémantiques HTML pour le Texte
Les balises sémantiques HTML pour le texte sont des balises HTML qui, en plus du formatage, véhiculent la signification sémantique du texte qu’elles contiennent.
Voici quelques exemples fréquents de balises et leurs significations :
<h1> (titre) : Cette balise H1 indique le titre de premier niveau. En général, une seule balise H1 est utilisée par page.
<h2> à <h6> (sous-titres) : Des sous-titres de niveaux d’importance différents. Plusieurs sous-titres du même niveau peuvent figurer sur une page.
<p> (paragraphe) : Un paragraphe de texte indépendant.
<a> (lien) : Marque un hyperlien d’une page à une autre.
<ol> (liste ordonnée) : Une liste d’éléments affichée dans un ordre spécifique, souvent commençant par des chiffres ou des lettres. Une balise <li> (élément de liste) contient un seul élément.
<ul> (liste non ordonnée) : Une liste d’éléments sans ordre particulier. Une balise <li> contient un seul élément.
<q> / <blockquote> : Une citation de texte.
<blockquote> sert pour les citations longues sur plusieurs lignes, et <q> pour les citations courtes d’une seule ligne.
<em> (accentuation) : Utilisé pour mettre en évidence un texte.
<strong> (accentuation forte) : Utilisé pour mettre en évidence de manière significative un texte.
<code> : Bloc de code informatique. Remarque : Nous n’avons listé que quelques-unes des balises sémantiques HTML les plus courantes. Il existe de nombreuses autres balises (telles que <summary>, <time>, <address>, <video>, etc.) que vous pouvez utiliser pour rendre le contenu de votre site web plus compréhensible.
Si nos conseils sur ce sujet vous ont été utiles, n’hésitez pas à naviguer à travers notre blog pour découvrir des articles sur des questions similaires. Vous pouvez aussi nous contacter pour bénéficier d’un accompagnement dédié en marketing et stratégie digitale.
