Bon, aujourd’hui, je m’attaque à un sujet assez costaux : les balises sémantiques en HTML 🤓
Elles sont la colonne vertébrale de vos pages web, et jouent un rôle clé dans l’accessibilité, le référencement naturel et la clarté de votre contenu.
Il y a une chose que je remarque encore trop souvent : la sémantique HTML est souvent négligée… voire complètement oubliée.
Je constate régulièrement que même des sites très bien designés souffrent d’un balisage HTML chaotique, notamment quand Elementor est mal utilisé. Résultat : des titres mal hiérarchisés, des sections mal définies, des menus invisibles pour les robots… et un référencement qui stagne.
Dans cet article, je vais vous expliquer comment bien structurer vos pages grâce aux balises sémantiques, en mettant l’accent sur celles réellement utiles dans Elementor.
Où trouver (et modifier) les balises HTML dans Elementor
Information très importante, Elementor vous permet de choisir manuellement les balises HTML utilisées dans vos pages, ce qui est essentiel pour construire une structure propre, lisible, et optimisée SEO.
Mais encore faut-il savoir où chercher ! Il existe en réalité deux méthodes, tout dépend si vous vous trouvez sur une page classique, ou dans le Theme Builder (constructeur de thème en français).
Méthode 1 : via les conteneurs
C’est la méthode la plus directe. Si vous travaillez avec les conteneurs d’Elementor, vous pouvez modifier la balise HTML de chaque bloc via l’interface :
- Sélectionnez le conteneur dans votre page
- Allez dans l’onglet Mise en page
- Ouvrez la section Options supplémentaires
- Dans le champ Balise HTML, choisissez la balise souhaitée : section, main, header, article, nav, etc.
Par défaut, Elementor applique une balise <div>, qui n’a pas de valeur sémantique. À vous de la remplacer intelligemment selon le rôle du bloc.
Méthode 2 : via les modèles du Theme Builder
Si vous utilisez le Theme Builder (ce que je recommande), la gestion des balises HTML est encore plus stratégique.
Deux informations très importantes à prendre en compte dans le Theme Builder d’Elementor :
- Les modèles d’en-tête (Header) et de pied de page (Footer) sont automatiquement balisés avec
<header>et<footer>, attention à ne pas les ajouter aux conteneurs dans ces modèles, sinon vous aurez des doublons ! - Mais pour les autres modèles, comme une page d’archive, un article unique, ou une page de contenu, c’est à vous de choisir la bonne balise dans les réglages du modèle. Généralement, il faut mettre la balise
<main>, qui n’est pas ajoutée automatiquement à ces pages.
Par exemple, dans le cas d’une page d’archive (comme la Toolbox sur mon site), vous devez sélectionner la balise <main> dans les Réglages du modèle > Tag HTML. Cela permet d’indiquer clairement à Google où se trouve le contenu principal de la page.
Pourquoi c’est important ?
Le balisage HTML est la colonne vertébrale de votre page : il permet aux moteurs de recherche et aux lecteurs d’écran de comprendre la hiérarchie de votre contenu. Et dans Elementor, vous avez le pouvoir (et la responsabilité) de le structurer comme il se doit.
Voyons maintenant quelles sont les principales balises sémantiques à connaître, et comment les utiliser concrètement dans vos pages Elementor.
La balise header : poser les fondations de votre entête
La balise <header> sert à baliser la partie supérieure de vos pages, celle que l’on appelle généralement l’en-tête. C’est ici que l’on place généralement le logo, la navigation principale, et parfois un call-to-action.
Dans Elementor, cette zone est gérée via le Theme Builder, dans un modèle dédié appelé « En-tête ». Et bonne nouvelle : Elementor applique automatiquement la balise <header> à ce modèle.
Vous n’avez donc pas besoin (ni intérêt) à ajouter manuellement une balise <header> dans le conteneur principal de l’en-tête. Cela créerait un doublon et risquerait de nuire à la clarté de votre code pour les moteurs de recherche.
Peut-on utiliser plusieurs header ?
La balise <header> peut effectivement être utilisée plusieurs fois dans une même page. Par exemple, pour baliser l’en-tête d’un article ou d’une section spécifique dans Elementor.
Mais si vous débutez ou souhaitez garder une structure claire et SEO-friendly, je vous recommande de réserver cette balise à l’en-tête principal du site (logo + navigation). Cela évite toute confusion, notamment pour les robots d’indexation. Et n’oubliez pas : un <header> ne doit jamais être imbriqué dans un autre <header>.
La balise nav : guider vos visiteurs (et les robots)
La balise <nav> est utilisée pour baliser vos zones de navigation. C’est un repère sémantique fort, autant pour les internautes que pour les moteurs de recherche. Elle permet à Google (et aux technologies d’assistance) d’identifier immédiatement les liens importants pour parcourir votre site.
Dans Elementor, vous pouvez appliquer cette balise directement à un conteneur contenant vos liens, que ce soit dans l’en-tête, le pied de page ou ailleurs.
Par exemple, ici, je place la balise <nav> dans le conteneur où sont situés mes liens, à l’intérieur de mon footer du Theme Builder :
Attention cependant, certains widget « Menu » d’Elementor ajoute automatiquement cette balise.
Où placer une balise nav ?
Vous pouvez (et devriez) utiliser plusieurs balises <nav> dans une même page, tant qu’elles sont justifiées par le contexte :
- Une dans le
<header>pour votre menu principal - Une dans le
<footer>pour les liens secondaires (mentions légales, contact, plan du site…)
N’en abusez pas, mais n’en privez pas vos utilisateurs non plus. Un bon menu bien balisé est un gain d’accessibilité énorme, notamment pour les lecteurs d’écran.
La balise main : le cœur de votre contenu
La balise <main> sert à baliser la zone de contenu principal de votre page. C’est là que se trouvent les informations que vos visiteurs sont venus consulter : texte, images, articles, produits, etc.
Une règle simple : il ne doit y avoir qu’une seule balise <main> par page. Elle est unique, tout comme le contenu central de votre page.
Et dans Elementor, comment ça se passe ?
Il y a en fait 2 possibilités. Tout dépend si vous êtes dans une page classique, ou dans le Theme Builder.
Sur une page classique (créée en mode standard, hors Theme Builder), Elementor ajoute automatiquement une balise <main> autour de votre contenu. Vous n’avez rien à faire, c’est intégré d’office.
En revanche, dès que vous utilisez le Theme Builder pour créer un modèle de page unique, d’article, ou d’archive, cette balise n’est pas ajoutée automatiquement. Il vous faudra alors l’assigner manuellement dans les réglages du modèle.
Dans le dernier cas, pensez donc à définir la balise <main> dans les réglages du modèle, via le champ “Tag HTML”.
Un conseil SEO (et HTML) important
N’imbriquez jamais une balise <main> dans un autre élément sémantique comme <article>, <section>, <header>, ou autre.
Elle doit rester unique et clairement identifiable, pour que les moteurs de recherche puissent immédiatement comprendre quelle portion de votre page contient l’information principale.
La balise section : organiser vos idées
Quand un bloc de contenu aborde un thème précis avec son propre titre, il mérite sa propre balise <section>. Cela indique aux moteurs de recherche (et aux outils d’accessibilité) qu’on entre dans un nouveau sujet, un peu comme un chapitre dans un livre.
Dans Elementor, ce qu’on appelle « sections » sont en réalité des conteneurs. Et par défaut, ces conteneurs sont balisés avec une simple <div>. Pour améliorer la structure sémantique de vos pages, vous pouvez (et devriez) changer cette balise.
Et la balise div dans tout ça ?
On entend parfois dire qu’il faut bannir les <div>, mais c’est faux. Cette balise reste très utile pour structurer des blocs sans signification particulière. C’est souvent elle qui compose la majorité du HTML d’une page, et c’est très bien ainsi.
L’important, c’est de réserver les balises sémantiques aux contenus qui le justifient : un thème distinct, un bloc autonome, un ensemble cohérent.
La balise article : pour vos contenus éditoriaux autonomes
La balise <article> est idéale pour structurer un contenu éditorial, pour permettre de signaler aux robots d’indexation quels éléments sont en lien avec le sujet de la page.
Dans Elementor, vous l’utiliserez surtout dans les modèles de type article unique, ou page unique, et contrairement à la balise <main>, vous pouvez utiliser plusieurs balises <article> dans une page.
Que doit contenir une balise article ?
Beaucoup de choses, tant qu’elles sont directement liées au contenu éditorial :
- Le titre de l’article (
<h1>,<h2>,<h3>, etc..) - Les métadonnées : nom de l’auteur, date de publication, catégorie
- Le corps du texte : paragraphes, images, listes, citations…
- Les liens internes vers d’autres contenus sur la même thématique (ex. : articles similaires ou complémentaires)
Pourquoi c’est important ?
Parce que cette balise envoie un message clair aux moteurs de recherche : ce contenu est un article complet, indépendant et pertinent. C’est une aide précieuse pour le SEO, mais aussi pour l’accessibilité, notamment avec les lecteurs d’écran.
Sur un blog, un site d’actualités ou une boutique en ligne, c’est un incontournable.
La balise aside : pour les contenus complémentaires
Contrairement à <article>, la balise <aside> concerne des contenus secondaires ou annexes.
Elle est parfaite pour encadrer des informations utiles, mais non essentielles à la lecture du contenu principal.
On peut par exemple la mettre sur :
- Une barre latérale (sidebar)
- Une newsletter
- Une citation
- Une section qui met en valeur une autre page de votre site
- Etc..
La balise footer : ne négligez pas le pied de page
Le pied de page est souvent perçu comme une simple formalité… mais en réalité, c’est un élément structurant de votre page. Il marque la fin du contenu principal tout en offrant des points d’accès complémentaires (navigation, infos légales, contact, etc.). Il mérite donc sa propre balise sémantique : <footer>.
Dans Elementor, cette zone est généralement gérée via un modèle spécifique « Pied de page » dans le Theme Builder.
Et comme pour l’en-tête, Elementor applique automatiquement la balise <footer> par défaut à ce modèle. Vous n’avez donc pas intérêt à la redéfinir manuellement à l’intérieur du conteneur principal, au risque de créer un doublon sémantique.
Que doit contenir un bon footer ?
Un <footer> bien structuré peut contenir :
- Des liens secondaires (mentions légales, politique de confidentialité, CGV, etc.)
- Votre logo (pourquoi pas une déclinaison ?)
- Une navigation complémentaire avec une balise
<nav> - Des informations de contact
- Vos réseaux sociaux
- Un champ d’inscription à votre newsletter
Cette balise vient clôturer proprement votre page, tout en orientant vos visiteurs vers d’autres actions utiles.
Le balisage des titres : de h1 à h6, pas de freestyle
La hiérarchie des titres est l’un des piliers d’une bonne structure HTML. Et pourtant, c’est souvent là que tout dérape… surtout avec Elementor, qui vous laisse libre de choisir n’importe quelle balise de titre, sans réel cadre.
Mais attention : la liberté, sans logique, nuit au référencement.
Voici les bonnes pratiques à retenir
- Une seule balise
<h1>par page (c’est le titre principal, souvent celui de votre article ou de votre page) - Utilisez des
<h2>pour structurer vos grandes sections, comme des chapitres. - Utilisez des
<h3>pour les sous-parties dans vos<h2>, et ainsi de suite jusqu’à<h6>si nécessaire (mais on va rarement aussi loin).
Un conseil côté design
Si vous utilisez un thème avec des tailles de titres prédéfinies, évitez d’utiliser un titre <h4> (ou plus petit) juste parce qu’il est de petite taille. Stylisez plutôt un <h2> ou <h3> pour qu’il paraisse plus petit si besoin, vous gagnerez en cohérence sémantique et en pertinence SEO, car ces balises sont mieux prises en compte par les moteurs de recherche.
Et si vous voulez aller plus loin sur ce sujet, je vous invite à lire mon article sur la rédaction de contenu optimisé pour le SEO : vous verrez que structure et contenu vont toujours de pair.
Des balises utiles, mais rarement utilisées… et pourtant !
Certaines balises sont très utiles, surtout quand on veut aller plus loin dans l’accessibilité et la précision :
<adress>pour les coordonnées dans le footer ou page contact<time>pour les dates d’événements ou de publications<blockquote>pour les citations,<cite>pour la source<data>et<dl>pour afficher des données chiffrées ou des glossaires intelligents, etc..
Ces balises ne sont pas intégrées nativement dans Elementor, mais vous pouvez les ajouter en HTML, notamment dans un widget HTML.
D’ailleurs, si vous souhaitez approfondir le sujet et découvrir la liste entière des balises HTML, je vous recommande fortement la documentation officielle sur les éléments de section HTML proposée par Mozilla.
Mieux baliser, c’est mieux construire : et Elementor n’échappe pas à la règle
Si vous créez des pages web avec Elementor, comprendre les balises sémantiques HTML n’est pas une option, c’est une nécessité.
D’un côté, elles structurent vos pages de manière lisible et logique, ce qui améliore l’expérience utilisateur.
De l’autre, elles fournissent des repères clairs pour les moteurs de recherche, renforçant ainsi votre SEO.
Même si Elementor facilite la création visuelle, il ne faut pas oublier que le fond structurel reste du HTML. Prendre le temps de baliser correctement vos contenus, c’est comme poser les fondations d’un bâtiment : invisibles, mais essentielles.
Et si vous vous sentez perdu entre les balises <main>, les <aside> ou la hiérarchie des <hn>, c’est justement là que j’interviens !
Besoin d’aide pour structurer ou optimiser les pages de votre site avec Elementor ?
Contactez-moi pour un accompagnement sur mesure.