On-Page SEO H2 Titre de niveau 2 Élément HTML
On-Page SEO : Balise H2, Titre de niveau 2 et Élément HTML
Introduction
L'optimisation pour les moteurs de recherche (SEO) est une discipline essentielle pour améliorer la visibilité et le positionnement d'un site web dans les résultats de recherche. Parmi les nombreux éléments qui composent une stratégie SEO efficace, les balises de titre, ou heading tags, jouent un rôle central. Elles contribuent à la fois à la compréhension du contenu par les moteurs de recherche et à la lisibilité pour les utilisateurs.
Au sein de cette hiérarchie, les balises H2 occupent une place stratégique. Elles ne sont pas plus importantes que la balise title ou que la balise H1 en termes de poids direct pour le classement, mais elles constituent un outil puissant pour structurer le contenu, clarifier les sous-thèmes d'une page et améliorer l'expérience globale. Correctement utilisées, les balises H2 aident les moteurs de recherche à mieux interpréter vos pages et permettent aux internautes de trouver plus rapidement les informations qu’ils recherchent.
Cet article explore en profondeur l'importance des balises H2 dans le cadre de l'optimisation SEO on-page. Nous aborderons leur fonctionnement, leurs bonnes pratiques d’utilisation, leurs liens avec les autres balises de titre (title, H1, H3 et suivantes), ainsi que leur impact sur l’accessibilité et l’expérience utilisateur. Vous découvrirez également des conseils concrets pour intégrer les mots-clés de manière naturelle, organiser une structure de page claire et mesurer l’impact de vos optimisations.
Concepts clés
Avant de plonger dans les aspects opérationnels, il est important de clarifier quelques notions fondamentales liées aux balises de titre et à la structure HTML d’une page. Une bonne compréhension de ces concepts vous permettra de mettre en place des optimisations solides, cohérentes et durables.
Qu'est-ce qu'une balise H2 ?
Les balises H2 sont des éléments HTML utilisés pour définir les sous-titres principaux d'une page web. Elles s’inscrivent dans une hiérarchie de balises de titre qui comprend :
- H1 : titre principal de la page
- H2 : sous-titres de premier niveau, sections majeures
- H3 : sous-sections détaillant une partie d’un H2
- H4, H5, H6 : niveaux complémentaires pour les contenus complexes
Au total, il existe six niveaux de titres HTML, de
Concrètement, une structure classique pourrait ressembler à ceci :
Guide complet du SEO on-page
Recherche de mots-clés
Identifier les intentions de recherche
Optimisation des balises HTML
Balise title
Balises H1 et H2
Cette hiérarchie aide à la fois les lecteurs humains et les robots d’indexation à comprendre la logique du document.
Rôle des balises H2 dans le SEO on-page
Pour les moteurs de recherche, les balises H2 fournissent une information sémantique sur la structure et le contenu d’une page. Elles ne sont pas un facteur de classement « magique », mais elles contribuent à la clarté du sujet traité, ce qui peut faciliter la bonne indexation et la pertinence perçue d’une page pour un ensemble de requêtes.
En optimisant correctement vos balises H2, vous pouvez notamment :
- Structurer le contenu de façon logique autour de sous-thèmes clairement identifiés.
- Mettre en avant les sujets importants que vous souhaitez voir compris par les moteurs de recherche.
- Aider les robots à associer certaines sections de votre page à des intentions de recherche spécifiques.
- Offrir aux utilisateurs des repères visuels qui les incitent à parcourir davantage de contenu.
Il est important de rappeler que les balises H2 ne remplacent ni la balise title ni la balise H1. Le </code> et le <code><h1></code> restent des signaux plus importants pour définir le sujet principal d’une page. Les balises <em>H2</em> viennent compléter cette information en détaillant les grands axes du contenu.</p> <h3 id="difference-entre-balise-h1-et-h2">Différence entre balise <title>, H1 et H2</h3>
<p>Une confusion fréquente consiste à considérer la balise <em>title</em>, la balise <em>H1</em> et les <em>H2</em> comme équivalentes. En réalité, elles remplissent des fonctions différentes et complémentaires.</p>
<ul> <li><strong>Balise <title> :</strong> elle se trouve dans l’élément <code><head></code> du document HTML et n’est généralement pas visible dans le corps de la page. C’est le titre principalement utilisé dans les pages de résultats (SERP) et dans l’onglet du navigateur. Elle joue un rôle majeur pour le taux de clic (CTR) et la compréhension du sujet par les moteurs de recherche.</li> <li><strong>Balise H1 :</strong> elle est placée dans le corps de la page et correspond au titre éditorial principal visible par l’utilisateur. Elle doit résumer clairement le sujet de la page. Dans la pratique, on recommande de n’utiliser qu’une seule balise H1 par page, même si les moteurs de recherche sont capables de gérer plusieurs H1 sans appliquer de pénalité automatique.</li> <li><strong>Balise H2 :</strong> elle sert à découper le contenu en sections cohérentes, chacune couvrant un sous-thème du sujet principal. Vous pouvez utiliser plusieurs balises H2 sur une même page, tant que la hiérarchie reste logique et que chaque H2 introduit une section distincte.</li>
</ul>
<p>Contrairement à certaines idées reçues, les balises <em>H2</em> ne sont pas utilisées de manière systématique par Google pour remplacer la balise <em>title</em> dans les résultats de recherche. Les moteurs peuvent exceptionnellement réécrire le titre affiché en s’appuyant sur différents éléments (H1, ancres de liens, contenu de la page), mais cela ne signifie pas que le H2 soit privilégié comme titre principal.</p> <h3 id="h1-h2-et-accessibilite">H1, H2 et accessibilité</h3>
<p>Au-delà du SEO, la bonne utilisation des balises de titre est cruciale pour l’accessibilité. Les technologies d’assistance, comme les lecteurs d’écran, s’appuient sur la structure des headings pour permettre aux utilisateurs de naviguer rapidement dans une page. Une hiérarchie claire de type H1 → H2 → H3 facilite grandement la compréhension et la navigation, notamment pour les personnes malvoyantes ou utilisant le clavier.</p>
<p>Une page correctement structurée doit donc :</p>
<ul> <li>Comporter un H1 unique décrivant le sujet principal.</li> <li>Utiliser des H2 pour les grandes sections thématiques.</li> <li>Employer des H3 (et suivants) pour les sous-sections lorsque nécessaire.</li> <li>Éviter d’utiliser les headings uniquement pour des raisons de style visuel, en les remplaçant si besoin par du CSS appliqué à des balises génériques comme <code><p></code> ou <code><div></code>.</li>
</ul>
<p>Cette approche améliore à la fois l’accessibilité et la cohérence du balisage, deux facteurs pris en compte dans une stratégie de qualité globale.</p> <h2 id="role-des-balises-h2-dans-l-experience-utilisateur">Rôle des balises H2 dans l’expérience utilisateur</h2>
<p>Les balises <em>H2</em> ne se limitent pas à transmettre une information structurante aux moteurs de recherche. Elles ont un impact direct sur la perception et le comportement des visiteurs. Un contenu bien découpé, avec des sous-titres informatifs et attractifs, est plus facile à parcourir, plus agréable à lire et plus convaincant.</p> <h3 id="lisibilite-et-scannabilite">Lisibilité et scannabilité</h3>
<p>La majorité des internautes ne lisent pas les pages web de manière linéaire. Ils les parcourent rapidement, en scannant les titres, les sous-titres, les listes et les éléments en gras pour identifier les parties qui les intéressent réellement. Les H2 jouent ici un rôle de balises visuelles qui guident l’œil et signalent les sections clés.</p>
<p>Des H2 clairs et descriptifs permettent à vos visiteurs de :</p>
<ul> <li>Comprendre en quelques secondes la structure générale de la page.</li> <li>Accéder rapidement à la section la plus pertinente pour leur besoin.</li> <li>Décider plus facilement de rester sur la page plutôt que de revenir en arrière vers les résultats de recherche.</li>
</ul>
<p>En améliorant la lisibilité et la scannabilité, vous réduisez le risque de rebond rapide et augmentez la probabilité que l’utilisateur interagisse davantage avec votre contenu (temps passé, pages vues, conversions).</p> <h3 id="coherence-editoriale-et-engagement">Coherence éditoriale et engagement</h3>
<p>Des balises <em>H2</em> bien pensées contribuent aussi à renforcer la cohérence éditoriale. Chaque H2 doit annoncer un sous-thème clairement défini, et le texte qui suit doit tenir la promesse formulée dans le sous-titre. Cette cohérence crée un effet de confiance : l’utilisateur comprend rapidement que la page est structurée, sérieuse et qu’elle traite le sujet en profondeur.</p>
<p>Quelques principes simples pour renforcer l’engagement grâce aux H2 :</p>
<ul> <li>Formuler des sous-titres qui répondent à des questions concrètes de l’utilisateur.</li> <li>Intégrer, lorsque c’est pertinent, des verbes d’action qui incitent à lire la suite.</li> <li>Éviter les formulations trop vagues du type « Divers » ou « Autres informations » qui n’apportent aucune information utile.</li>
</ul>
<p>En parallèle, le travail sur vos H2 peut s’articuler avec d’autres éléments de mise en forme (paragraphes courts, listes à puces, encadrés, exemples concrets) pour composer un ensemble éditorial cohérent et agréable.</p> <h2 id="bonnes-pratiques-pour-optimiser-les-balises-h2">Bonnes pratiques pour optimiser les balises H2</h2>
<p>Les balises <em>H2</em> doivent être pensées à la fois pour les utilisateurs et pour les moteurs de recherche. Il ne s’agit ni de les sur-optimiser, ni de les négliger. Une approche équilibrée, centrée sur la clarté et la pertinence, permet d’obtenir de bons résultats sur la durée.</p> <h3 id="inclure-des-mots-cles-pertinents-sans-sur-optimisation">Inclure des mots-clés pertinents (sans sur-optimisation)</h3>
<p>Les balises <em>H2</em> offrent une occasion naturelle d’intégrer des mots-clés liés à votre thématique. Cela ne signifie pas qu’il faut répéter de façon systématique le même mot-clé exact dans tous vos sous-titres. Une telle pratique peut donner une impression de bourrage de mots-clés, nuire à la lisibilité et envoyer un signal artificiel aux moteurs de recherche.</p>
<p>Pour bien exploiter vos H2, vous pouvez appliquer les principes suivants :</p>
<ul> <li><strong>Pertinence :</strong> choisissez des mots-clés qui reflètent réellement le contenu développé dans la section. Le sous-titre doit rester fidèle au texte qui suit.</li> <li><strong>Naturalité :</strong> rédigez vos H2 d’abord pour l’utilisateur. Le texte doit être fluide, compréhensible et utile, même si l’on ignore toute notion de SEO.</li> <li><strong>Variantes sémantiques :</strong> utilisez des synonymes, des expressions proches et des mots-clés de longue traîne pour couvrir un champ lexical riche, plutôt que de répéter mécaniquement le même terme.</li>
</ul>
<p>Une bonne pratique courante consiste à placer le mot-clé principal dans la balise <em>title</em> et dans le H1, puis à utiliser des variantes ou des expressions connexes dans les H2 et H3. De cette manière, vous conservez une bonne cohérence sémantique tout en évitant la redondance excessive.</p> <h3 id="maintenir-une-structure-logique-et-coherente">Maintenir une structure logique et cohérente</h3>
<p>La qualité d'une optimisation SEO on-page ne se mesure pas uniquement à la présence de mots-clés, mais aussi à la rigueur de la structure utilisée. Les balises <em>H2</em> doivent s’intégrer dans une hiérarchie claire, compréhensible par les moteurs de recherche comme par les lecteurs.</p>
<ul> <li><strong>Niveau hiérarchique :</strong> les balises <em>H2</em> doivent se situer sous le H1 et au-dessus des niveaux inférieurs (H3, H4, etc.). Il est préférable d’éviter de passer directement de H1 à H3 sans H2 lorsqu’il existe des sections majeures dans votre contenu.</li> <li><strong>Sous-titres significatifs :</strong> chaque H2 doit introduire une section bien définie, qui traite un aspect précis du sujet principal. Un lecteur qui ne lirait que vos H2 devrait déjà avoir une idée assez claire du plan de la page.</li> <li><strong>Éviter les ruptures logiques :</strong> la suite de vos H2 doit suivre une progression cohérente. Par exemple, sur une page consacrée aux balises de titre, l’enchaînement « Définitions », « Rôle dans le SEO », « Bonnes pratiques », « Erreurs à éviter » est plus logique qu’un ordre aléatoire.</li>
</ul>
<p>Une architecture de titres cohérente facilite aussi la mise à jour de votre contenu. Vous pouvez ajouter, supprimer ou réorganiser des sections sans perdre le fil global ni dégrader l’expérience de lecture.</p> <h3 id="longueur-et-style-des-balises-h2">Longueur et style des balises H2</h3>
<p>Contrairement à la balise <em>title</em>, qui doit généralement rester dans une fourchette d’environ 50 à 60 caractères pour un affichage optimal en résultats de recherche, les H2 ne sont pas soumises à une limite stricte de longueur. Il est néanmoins recommandé de rester concis, afin que le sous-titre reste facilement lisible et immédiatement compréhensible.</p>
<p>Pour le style rédactionnel des H2 :</p>
<ul> <li>Privilégiez les formulations claires et informatives.</li> <li>Évitez les jeux de mots obscurs ou trop ambigus si l’objectif est d’être compris rapidement.</li> <li>Adaptez le ton à votre audience, tout en maintenant une cohérence avec le reste du contenu.</li>
</ul>
<p>Un H2 efficace doit pouvoir être compris même sorti de son contexte, ce qui est particulièrement utile pour les lecteurs qui parcourent la page très rapidement.</p> <h3 id="balises-h2-et-premieres-lignes-de-contenu">Balises H2 et premières lignes de contenu</h3>
<p>De nombreuses bonnes pratiques de rédaction web recommandent d’indiquer clairement le sujet de la page dès les premières lignes de texte. Placer le mot-clé principal ou une expression sémantiquement proche dans les premiers cent mots du contenu, puis le décliner dans les H2, est une démarche fréquente. Cela aide à confirmer le thème de la page pour les moteurs de recherche et à rassurer immédiatement l’utilisateur sur la pertinence du contenu.</p>
<p>Les H2 peuvent également servir de repère pour introduire des blocs de contenu particulièrement importants, comme des tutoriels pas à pas, des études de cas ou des sections de questions fréquemment posées. Dans ce cas, veillez à ce que le texte qui suit la balise H2 soit immédiatement utile et en lien étroit avec le sous-titre utilisé.</p> <h2 id="erreurs-frequentes-a-eviter-avec-les-balises-h2">Erreurs fréquentes à éviter avec les balises H2</h2>
<p>Certaines idées reçues ou mauvaises habitudes peuvent limiter l’efficacité de vos balises <em>H2</em>, voire nuire à la clarté de votre page. Identifier ces erreurs vous permettra de corriger rapidement vos contenus existants et de mieux structurer vos futures pages.</p> <h3 id="considerer-le-h2-comme-un-facteur-de-classement-superieur-au-h1-ou-a-la-balise-title">Considérer le H2 comme un facteur de classement supérieur au H1 ou à la balise title</h3>
<p>Il est erroné d’affirmer qu’une balise H2 aurait un impact de classement plus fort qu’un H1 ou que la balise <em>title</em>. En pratique, la balise <em>title</em> et le H1 demeurent des signaux plus importants pour définir le sujet principal d’une page, tandis que les H2 ont avant tout un rôle de structuration et de clarification des sous-thèmes.</p>
<p>Les moteurs de recherche ne documentent pas de hiérarchie de poids indiquant que H2 serait supérieur à H1 ou au <em>title</em>. Chercher à « forcer » le H2 dans ce sens n’apporte aucun bénéfice et détourne de l’essentiel : une structure claire et un contenu de qualité.</p> <h3 id="penser-que-google-exige-absolument-un-h2-pour-bien-referencer-une-page">Penser que Google exige absolument un H2 pour bien référencer une page</h3>
<p>Aucune exigence technique n’impose la présence de balises H2 pour qu’une page soit indexée ou qu’elle puisse se positionner. De nombreuses pages se classent correctement sans utiliser de H2, notamment lorsqu’elles sont très courtes ou qu’elles répondent à une question simple.</p>
<p>Cependant, dès que le contenu devient un peu long ou complexe, l’utilisation de H2 reste fortement recommandée. Elle n’est pas une obligation technique stricte, mais une bonne pratique de structure et de lisibilité qui contribue à une meilleure expérience utilisateur et à une compréhension plus fine du contenu par les moteurs de recherche.</p> <h3 id="dupliquer-systematiquement-le-meme-mot-cle-dans-tous-les-h2">Dupliquer systématiquement le même mot-clé dans tous les H2</h3>
<p>Insérer le mot-clé principal dans chaque H2, sans tenir compte du sens réel de la section, peut être perçu comme une tentative de bourrage de mots-clés. Cette approche rend le texte artificiel, appauvrit le champ lexical et nuit à la logique du contenu.</p>
<p>Il est nettement préférable de :</p>
<ul> <li>Réserver le mot-clé principal au H1 et à la balise <em>title</em> lorsqu’il se prête naturellement à la formulation.</li> <li>Utiliser des expressions proches, des synonymes et des reformulations dans les H2 pour couvrir différentes variantes de recherche.</li> <li>Mettre l’accent sur la clarté et l’utilité de chaque sous-titre.</li>
</ul>
<p>Cette approche sémantiquement riche est plus alignée avec les algorithmes modernes qui valorisent la pertinence globale et la qualité du contenu plutôt que la répétition mécanique d’un terme précis.</p> <h3 id="utiliser-les-heading-pour-la-mise-en-forme-seulement">Utiliser les heading pour la mise en forme seulement</h3>
<p>Une autre erreur courante consiste à employer des balises H2 uniquement pour agrandir le texte ou le mettre en gras visuellement, sans que le contenu corresponde à un véritable sous-titre logique. Cette pratique brouille la hiérarchie, complique la tâche des moteurs de recherche et nuit à l’accessibilité.</p>
<p>Pour la mise en forme, il est préférable de recourir aux feuilles de style CSS et de réserver les balises H1 à H6 au balisage sémantique de vos titres et sous-titres. Ainsi, chaque H2 signale réellement le début d’une section thématique structurée.</p> <h2 id="completer-sa-strategie-h2-meta-title-meta-description-et-contenu">Compléter sa stratégie : H2, meta title, meta description et contenu</h2>
<p>Les balises <em>H2</em> ne sont qu’un des nombreux leviers de l’optimisation on-page. Pour en tirer pleinement parti, il est utile de les envisager dans une stratégie plus globale qui intègre la balise <em>title</em>, la meta description et le corps du texte.</p> <h3 id="balise-title-et-h1-la-base-du-sujet-principal">Balise title et H1 : la base du sujet principal</h3>
<p>La balise <em>title</em> et le H1 définissent ensemble le cadre principal de votre page. Pour maximiser leur efficacité :</p>
<ul> <li>Visez une balise <em>title</em> généralement comprise entre environ 50 et 60 caractères, afin de limiter les risques de troncature en résultats de recherche, tout en restant claire et attractive.</li> <li>Placez, lorsque c’est naturel, le mot-clé principal dans la première partie de la balise <em>title</em>, afin de mettre en évidence le sujet de la page.</li> <li>Rédigez un H1 qui confirme le sujet, tout en pouvant adopter une formulation légèrement différente, plus éditoriale ou explicative.</li>
</ul>
<p>Les H2 viennent ensuite détailler les grands axes du contenu, en cohérence avec ce duo title / H1.</p> <h3 id="meta-description-et-structuration-des-h2">Meta description et structuration des H2</h3>
<p>La meta description, bien qu’elle ne soit pas un facteur de classement direct, joue un rôle important dans le taux de clic. En moyenne, elle est rédigée dans une fourchette d’environ 155 à 160 caractères pour un affichage complet sur desktop, même si cette longueur peut varier selon les contextes.</p>
<p>Le lien avec vos H2 se fait sur le plan éditorial : la meta description doit annoncer les principaux bénéfices et les grands thèmes abordés sur la page. Les H2, eux, développent ces thèmes en sections distinctes. Une bonne cohérence entre meta description et H2 permet de tenir la promesse faite à l’utilisateur en résultats de recherche et d’éviter les déceptions qui pourraient conduire à un retour rapide vers les SERP.</p> <h3 id="contenu-premiers-paragraphes-et-coherence-semantique">Contenu, premiers paragraphes et cohérence sémantique</h3>
<p>Pour renforcer la clarté de votre page, il est souvent recommandé d’introduire le sujet de façon précise dès l’introduction, idéalement dans les cent premiers mots. Cette introduction doit annoncer le thème général et les principaux aspects qui seront développés plus bas, sous forme de H2.</p>
<p>La cohérence sémantique entre l’introduction, les H2 et le contenu qui les suit est essentielle. Elle permet :</p>
<ul> <li>Aux moteurs de recherche de mieux comprendre la couverture du sujet.</li> <li>Aux utilisateurs de vérifier d’un coup d’œil que la page répond bien à leur intention de recherche.</li> <li>De structurer les différents angles d’un même thème de façon ordonnée (définition, avantages, étapes, exemples, outils, etc.).</li>
</ul> <h2 id="balises-h2-accessibilite-et-bonnes-pratiques-techniques">Balises H2, accessibilité et bonnes pratiques techniques</h2>
<p>Au-delà de la dimension purement éditoriale, les balises <em>H2</em> participent aussi aux bonnes pratiques techniques d’un site de qualité. Un balisage propre, cohérent et accessible contribue indirectement à de meilleures performances globales.</p> <h3 id="navigation-via-les-lecteurs-d-ecran">Navigation via les lecteurs d’écran</h3>
<p>Les lecteurs d’écran offrent la possibilité de naviguer rapidement d’un titre à l’autre. Une personne utilisant ce type d’outil peut afficher la liste des headings présents sur une page et décider de se rendre directement à la section qui l’intéresse. Si vos H2 ne sont pas explicites, ou si la hiérarchie est cassée, cette navigation devient beaucoup plus difficile.</p>
<p>Pour améliorer l’accessibilité grâce à vos H2 :</p>
<ul> <li>Évitez les H2 trop génériques qui n’indiquent pas clairement le sujet de la section.</li> <li>Vérifiez que l’ordre des niveaux de titre est logique (pas de saut injustifié de H2 à H4, par exemple).</li> <li>Contrôlez que chaque section importante commence bien par un H2 ou un heading adapté.</li>
</ul> <h3 id="structure-html-et-maintenance-du-site">Structure HTML et maintenance du site</h3>
<p>Une structure HTML correctement hiérarchisée simplifie la maintenance de vos contenus sur le long terme. Les développeurs, intégrateurs et rédacteurs peuvent plus facilement repérer la construction de la page, réorganiser des sections ou réutiliser des modèles.</p>
<p>Par exemple, un gabarit de page peut prévoir :</p>
<ul> <li>Un H1 unique pour le titre principal.</li> <li>Un ensemble de H2 pour les sections standard (introduction, concepts, mise en pratique, FAQ, etc.).</li> <li>Des H3 optionnels pour approfondir certains points spécifiques.</li>
</ul>
<p>Cette approche modulaire facilite les mises à jour, tout en garantissant une expérience homogène pour les utilisateurs et une cohérence pour les moteurs de recherche.</p> <h2 id="mettre-en-pratique-construire-une-page-optimisee-autour-des-h2">Mettre en pratique : construire une page optimisée autour des H2</h2>
<p>Pour conclure ce panorama, voici une démarche concrète pour tirer le meilleur parti des balises <em>H2</em> dans la conception d’une page orientée SEO et expérience utilisateur.</p> <h3 id="etape-1-definir-le-sujet-principal-et-l-intention-de-recherche">Étape 1 : définir le sujet principal et l’intention de recherche</h3>
<p>Avant de rédiger, identifiez clairement le sujet central de votre page et l’intention de recherche visée (informationnelle, transactionnelle, comparatif, etc.). Ce sujet principal sera reflété dans la balise <em>title</em> et dans le H1.</p> <h3 id="etape-2-esquisser-le-plan-de-la-page-en-h2">Étape 2 : esquisser le plan de la page en H2</h3>
<p>Listez ensuite les grands sous-thèmes nécessaires pour répondre de manière complète à l’objectif de la page. Chacun de ces sous-thèmes deviendra un H2. À ce stade, ne vous concentrez pas encore sur le style exact de la formulation, mais sur la logique globale du plan.</p> <h3 id="etape-3-affiner-les-h2-avec-des-formulations-claires-et-orientees-utilisateur">Étape 3 : affiner les H2 avec des formulations claires et orientées utilisateur</h3>
<p>Une fois le plan validé, reformulez chaque H2 de manière à ce qu’il soit :</p>
<ul> <li>Compréhensible en une seule lecture.</li> <li>Représentatif de la section qu’il introduit.</li> <li>Aligné avec les questions ou besoins concrets de votre audience.</li>
</ul>
<p>Intégrez, lorsque c’est pertinent, des mots-clés ou expressions sémantiquement proches, sans tomber dans la répétition forcée.</p> <h3 id="etape-4-rediger-le-contenu-en-respectant-la-promesse-de-chaque-h2">Étape 4 : rédiger le contenu en respectant la promesse de chaque H2</h3>
<p>Pour chaque H2, développez un contenu qui répond précisément à la promesse exprimée dans le sous-titre. Évitez de mélanger plusieurs sujets distincts sous un même H2 : si une section devient trop longue ou aborde des angles très différents, il peut être judicieux de la scinder en plusieurs H2 ou d’y ajouter des H3.</p> <h3 id="etape-5-relire-la-page-a-travers-ses-h2">Étape 5 : relire la page « à travers ses H2 »</h3>
<p>En phase de relecture, parcourez la page en ne lisant que le H1 et les H2. Posez-vous les questions suivantes :</p>
<ul> <li>Comprend-on clairement le sujet de la page et sa structure ?</li> <li>Les H2 suivent-ils un ordre logique ?</li> <li>Y a-t-il des répétitions inutiles ou des sous-titres trop vagues ?</li>
</ul>
<p>Si les réponses ne sont pas satisfaisantes, retravaillez vos H2 jusqu’à obtenir un plan fluide et informatif.</p> <h2 id="conclusion-la-place-des-h2-dans-une-strategie-seo-moderne">Conclusion : la place des H2 dans une stratégie SEO moderne</h2>
<p>Les balises <em>H2</em> occupent une position intermédiaire mais essentielle dans l’architecture d’une page web. Elles ne remplacent ni la balise <em>title</em> ni le H1, qui restent les éléments centraux pour définir le sujet principal, mais elles structurent les sous-thèmes, améliorent la lisibilité, renforcent l’accessibilité et contribuent à la compréhension globale du contenu par les moteurs de recherche.</p>
<p>En combinant une utilisation réfléchie des H2 avec un travail rigoureux sur le <em>title</em>, le H1, la meta description et le corps du texte, vous pouvez construire des pages à la fois performantes en SEO on-page et réellement utiles pour vos visiteurs. La clé réside dans l’équilibre : des titres clairs, une hiérarchie logique, un champ lexical riche et une expérience de lecture fluide.</p>
<p>En appliquant ces bonnes pratiques à l’ensemble de vos contenus, vous renforcez la qualité éditoriale de votre site et vous créez des bases solides pour un référencement naturel durable.</p>
</body>
</html>
</div>
<!-- CTA Section -->
<div class="mt-12 pt-8 border-t border-gray-200">
<div class="bg-gradient-to-r from-purple-600 to-blue-600 rounded-xl p-8 text-center text-white">
<h3 class="text-2xl font-bold mb-4">Besoin d'aide avec votre SEO ?</h3>
<p class="mb-6 text-purple-100">Notre équipe d'experts peut vous aider à optimiser votre site e-commerce</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="/seo-ecommerce" class="bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-purple-50 transition inline-block">
Découvrir nos services SEO
</a>
<a href="/#contact" class="bg-purple-800 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-900 transition inline-block">
Nous contacter
</a>
</div>
</div>
</div>
</article>
<!-- Section Commentaires -->
<div class="mt-12 max-w-4xl mx-auto bg-white rounded-2xl shadow-xl p-8 md:p-12">
<h2 class="text-3xl font-bold text-gray-900 mb-6 flex items-center gap-3">
<i class="fas fa-comments text-purple-600"></i>
Commentaires
</h2>
<!-- Liste des commentaires approuvés -->
<div id="comments-list" class="mb-8 space-y-6">
<!-- Les commentaires approuvés seront chargés ici via JavaScript -->
</div>
<!-- Formulaire de commentaire -->
<div class="border-t border-gray-200 pt-8">
<h3 class="text-xl font-semibold text-gray-900 mb-4">Laisser un commentaire</h3>
<form id="comment-form" class="space-y-4">
<input type="hidden" id="article-slug" value="on-page-seo-h2-titre-de-niveau-2-element-html">
<div class="grid md:grid-cols-2 gap-4">
<div>
<label for="comment-name" class="block text-sm font-medium text-gray-700 mb-2">Nom *</label>
<input type="text" id="comment-name" name="name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
</div>
<div>
<label for="comment-email" class="block text-sm font-medium text-gray-700 mb-2">Email *</label>
<input type="email" id="comment-email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
</div>
</div>
<div>
<label for="comment-message" class="block text-sm font-medium text-gray-700 mb-2">Message *</label>
<textarea id="comment-message" name="message" rows="5" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"></textarea>
</div>
<div class="text-sm text-gray-600">
<i class="fas fa-info-circle text-purple-600"></i>
Votre commentaire sera soumis à modération avant publication.
</div>
<button type="submit" class="bg-gradient-to-r from-purple-600 to-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:from-purple-700 hover:to-blue-700 transition inline-flex items-center gap-2">
<i class="fas fa-paper-plane"></i>
Publier le commentaire
</button>
</form>
<div id="comment-status" class="mt-4 hidden"></div>
</div>
</div>
<!-- Navigation Articles -->
<div class="mt-12 max-w-4xl mx-auto">
<a href="/blog" class="inline-flex items-center gap-2 text-purple-600 hover:text-purple-800 transition font-semibold">
<i class="fas fa-arrow-left"></i>
Retour au blog
</a>
</div>
</div>
</section>
<!-- Script pour les commentaires -->
<script>
const articleSlug = 'on-page-seo-h2-titre-de-niveau-2-element-html';
// Charger les commentaires approuvés
async function loadComments() {
try {
const response = await fetch(`/gestion-commentaires/get-comments.php?slug=${articleSlug}`);
const data = await response.json();
const commentsList = document.getElementById('comments-list');
if (data.success && data.comments.length > 0) {
commentsList.innerHTML = data.comments.map(comment => `
<div class="border-l-4 border-purple-600 pl-4 py-2">
<div class="flex items-center gap-2 mb-2">
<strong class="text-gray-900">${comment.name}</strong>
<span class="text-sm text-gray-500">•</span>
<span class="text-sm text-gray-500">${new Date(comment.date).toLocaleDateString('fr-FR')}</span>
</div>
<p class="text-gray-700">${comment.message}</p>
</div>
`).join('');
} else {
commentsList.innerHTML = '<p class="text-gray-500 italic">Aucun commentaire pour le moment. Soyez le premier à commenter !</p>';
}
} catch (error) {
console.error('Erreur lors du chargement des commentaires:', error);
}
}
// Gérer la soumission du formulaire
document.getElementById('comment-form').addEventListener('submit', async function(e) {
e.preventDefault();
const formData = {
slug: articleSlug,
name: document.getElementById('comment-name').value,
email: document.getElementById('comment-email').value,
message: document.getElementById('comment-message').value
};
const submitBtn = this.querySelector('button[type="submit"]');
const originalText = submitBtn.innerHTML;
submitBtn.disabled = true;
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Envoi en cours...';
try {
const response = await fetch('/gestion-commentaires/submit-comment.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
});
const result = await response.json();
const messageDiv = document.getElementById('comment-status');
if (result.success) {
messageDiv.className = 'mt-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg';
messageDiv.textContent = 'Merci ! Votre commentaire a été soumis et sera publié après modération.';
messageDiv.classList.remove('hidden');
this.reset();
} else {
messageDiv.className = 'mt-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg';
messageDiv.textContent = result.message || 'Une erreur est survenue. Veuillez réessayer.';
messageDiv.classList.remove('hidden');
}
} catch (error) {
const messageDiv = document.getElementById('comment-status');
messageDiv.className = 'mt-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg';
messageDiv.textContent = 'Erreur de connexion. Veuillez réessayer plus tard.';
messageDiv.classList.remove('hidden');
} finally {
submitBtn.disabled = false;
submitBtn.innerHTML = originalText;
}
});
// Charger les commentaires au chargement de la page
loadComments();
</script>
<footer class="bg-gray-950 text-gray-400 py-12">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0 flex items-start gap-4">
<img src="/images/logo.png" alt="Logo VRAIVEX" class="h-32 w-32 md:h-40 md:w-40 object-contain">
<div>
<a href="#" class="text-2xl font-bold block">
<span class="gradient-text">VRAIVEX</span>
</a>
<p class="mt-2 text-sm">Automatisation, IA et SEO au service de la performance e-commerce</p>
</div>
</div>
<div class="flex flex-col items-center md:items-end">
<div class="grid grid-cols-2 md:flex md:flex-wrap gap-3 md:space-x-6 mb-4 text-center md:text-right">
<a href="/#about" class="hover:text-white transition text-sm">À propos</a>
<a href="/#services" class="hover:text-white transition text-sm">Services</a>
<a href="/#prestations" class="hover:text-white transition text-sm">Prestations</a>
<a href="/#bestsellers" class="hover:text-white transition text-sm">Best Sellers</a>
<a href="/#realisations" class="hover:text-white transition text-sm">Réalisations</a>
<a href="/#brands" class="hover:text-white transition text-sm">Nos Sites</a>
<a href="/creation-site-ecommerce" class="hover:text-white transition text-sm">Création Sites</a>
<a href="/seo-ecommerce" class="hover:text-white transition text-sm">SEO E-commerce</a>
<a href="/partenaires" class="hover:text-white transition text-sm">Partenaires</a>
<a href="/#contact" class="hover:text-white transition text-sm">Contact</a>
</div>
<p class="text-sm text-center md:text-right">© 2026 VRAIVEX. Tous droits réservés.</p>
</div>
</div>
</div>
</footer>
<!-- Back to Top Button -->
<button id="backToTop" class="fixed bottom-8 right-8 bg-gradient-to-r from-purple-600 to-blue-600 text-white p-4 rounded-full shadow-lg hover:shadow-xl transform hover:scale-110 transition-all duration-300 z-50 hidden">
<i class="fas fa-arrow-up text-xl"></i>
</button>
<script>
// Header scroll effect
window.addEventListener('scroll', function() {
const header = document.getElementById('header');
if (window.scrollY > 100) {
header.classList.add('header-scrolled');
} else {
header.classList.remove('header-scrolled');
}
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Mobile menu toggle
const mobileMenuButton = document.getElementById('mobileMenuButton');
const mobileMenu = document.getElementById('mobileMenu');
const menuIcon = document.getElementById('menuIcon');
if (mobileMenuButton && mobileMenu) {
mobileMenuButton.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
// Toggle icon between bars and times
if (mobileMenu.classList.contains('hidden')) {
menuIcon.classList.remove('fa-times');
menuIcon.classList.add('fa-bars');
} else {
menuIcon.classList.remove('fa-bars');
menuIcon.classList.add('fa-times');
}
});
// Close menu when clicking on a link
const mobileLinks = mobileMenu.querySelectorAll('a');
mobileLinks.forEach(link => {
link.addEventListener('click', function() {
mobileMenu.classList.add('hidden');
menuIcon.classList.remove('fa-times');
menuIcon.classList.add('fa-bars');
});
});
}
// Brands Carousel
const brandsCarousel = document.getElementById('brandsCarousel');
const brandsContainer = document.getElementById('brandsContainer');
const brandsPrevBtn = document.getElementById('brandsPrevBtn');
const brandsNextBtn = document.getElementById('brandsNextBtn');
const brandsPrevBtnMobile = document.getElementById('brandsPrevBtnMobile');
const brandsNextBtnMobile = document.getElementById('brandsNextBtnMobile');
if (brandsContainer && brandsCarousel) {
let currentIndex = 0;
const cards = brandsContainer.querySelectorAll('.brand-card');
const gap = 24;
const cardsPerView = { mobile: 1, tablet: 2, desktop: 3, large: 4 };
function getCardsPerView() {
const w = window.innerWidth;
if (w >= 1280) return cardsPerView.large;
if (w >= 1024) return cardsPerView.desktop;
if (w >= 768) return cardsPerView.tablet;
return cardsPerView.mobile;
}
function getCardWidth() {
const cpv = getCardsPerView();
const cw = brandsCarousel.offsetWidth;
return (cw - gap * (cpv - 1)) / cpv;
}
function updateCarousel() {
const cpv = getCardsPerView();
const cardW = getCardWidth();
const maxIdx = Math.max(0, cards.length - cpv);
currentIndex = Math.min(currentIndex, maxIdx);
const offset = currentIndex * (cardW + gap);
brandsContainer.style.transform = `translateX(-${offset}px)`;
const atStart = currentIndex === 0;
const atEnd = currentIndex >= maxIdx;
[brandsPrevBtn, brandsPrevBtnMobile].forEach(function(btn) {
if (btn) { btn.style.opacity = atStart ? '0.4' : '1'; btn.style.pointerEvents = atStart ? 'none' : 'auto'; }
});
[brandsNextBtn, brandsNextBtnMobile].forEach(function(btn) {
if (btn) { btn.style.opacity = atEnd ? '0.4' : '1'; btn.style.pointerEvents = atEnd ? 'none' : 'auto'; }
});
if (document.getElementById('brandsCounter')) {
document.getElementById('brandsCounter').textContent = (currentIndex + 1) + ' / ' + (maxIdx + 1);
}
}
function nextSlide() {
const cpv = getCardsPerView();
const maxIdx = Math.max(0, cards.length - cpv);
if (currentIndex < maxIdx) { currentIndex++; updateCarousel(); }
}
function prevSlide() {
if (currentIndex > 0) { currentIndex--; updateCarousel(); }
}
if (brandsNextBtn) brandsNextBtn.addEventListener('click', nextSlide);
if (brandsPrevBtn) brandsPrevBtn.addEventListener('click', prevSlide);
if (brandsNextBtnMobile) brandsNextBtnMobile.addEventListener('click', nextSlide);
if (brandsPrevBtnMobile) brandsPrevBtnMobile.addEventListener('click', prevSlide);
function setCardWidths() {
const cardW = getCardWidth();
cards.forEach(function(card) {
card.style.width = cardW + 'px';
card.style.minWidth = cardW + 'px';
card.style.flexShrink = '0';
});
}
let touchStartX = 0;
let touchEndX = 0;
brandsCarousel.addEventListener('touchstart', function(e) { touchStartX = e.changedTouches[0].screenX; }, { passive: true });
brandsCarousel.addEventListener('touchend', function(e) {
touchEndX = e.changedTouches[0].screenX;
const diff = touchStartX - touchEndX;
if (Math.abs(diff) > 50) { diff > 0 ? nextSlide() : prevSlide(); }
}, { passive: true });
setCardWidths();
updateCarousel();
let resizeTimeout;
window.addEventListener('resize', function() {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function() {
setCardWidths();
currentIndex = 0;
updateCarousel();
}, 250);
});
}
</script>
<script>
// Header scroll effect
window.addEventListener('scroll', function() {
const header = document.getElementById('header');
if (window.scrollY > 50) {
header.classList.add('header-scrolled');
} else {
header.classList.remove('header-scrolled');
}
});
// Scroll animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);
// Observe all fade-in-up elements
document.querySelectorAll('.fade-in-up').forEach(el => {
observer.observe(el);
});
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Counter animation for stats
function animateCounter(element, target, duration = 2000) {
let start = 0;
const increment = target / (duration / 16);
const timer = setInterval(() => {
start += increment;
if (start >= target) {
element.textContent = target + (element.textContent.includes('+') ? '+' : '') + (element.textContent.includes('K') ? 'K€' : '');
clearInterval(timer);
} else {
element.textContent = Math.floor(start) + (element.textContent.includes('+') ? '+' : '') + (element.textContent.includes('K') ? 'K€' : '');
}
}, 16);
}
// Observe stats section
const statsObserver = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting && !entry.target.classList.contains('animated')) {
entry.target.classList.add('animated');
const statsCards = entry.target.querySelectorAll('.stats-card');
statsCards.forEach((card, index) => {
setTimeout(() => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
setTimeout(() => {
card.style.transition = 'all 0.6s ease';
card.style.opacity = '1';
card.style.transform = 'translateY(0)';
}, 100);
}, index * 100);
});
}
});
}, { threshold: 0.3 });
const statsSection = document.querySelector('section.bg-gradient-to-r');
if (statsSection) {
statsObserver.observe(statsSection);
}
</script>
<script>
// Gestion du formulaire de contact
const contactForm = document.getElementById('contact-form');
const formMessage = document.getElementById('form-message');
const submitBtn = document.getElementById('submit-btn');
if (contactForm) {
contactForm.addEventListener('submit', async function(e) {
e.preventDefault();
// Désactiver le bouton pendant l'envoi
submitBtn.disabled = true;
submitBtn.textContent = 'Envoi en cours...';
// Récupérer les données du formulaire
const formData = new FormData(contactForm);
try {
// Vérifier que les données sont bien dans le FormData
const formDataObj = {
name: formData.get('name'),
email: formData.get('email'),
subject: formData.get('subject'),
message: formData.get('message')
};
console.log('Données du formulaire:', formDataObj);
// Vérifier que tous les champs sont remplis
if (!formDataObj.name || !formDataObj.email || !formDataObj.subject || !formDataObj.message) {
formMessage.classList.remove('hidden');
formMessage.className = 'mb-6 p-4 rounded-lg bg-red-600 text-white';
formMessage.textContent = 'Veuillez remplir tous les champs du formulaire.';
submitBtn.disabled = false;
submitBtn.textContent = 'Envoyer le message';
return;
}
// Essayer d'abord avec JSON (plus fiable)
// Siça ne fonctionne pas, on essaiera avec FormData
let response;
try {
// Méthode 1 : Envoyer en JSON (plus fiable selon les forums)
response = await fetch('gestion-formulaire-contact/send-email-json.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formDataObj)
});
} catch (jsonError) {
console.warn('Erreur avec JSON, essai avec FormData:', jsonError);
// Méthode 2 : Fallback avec FormData
response = await fetch('send-email.php', {
method: 'POST',
body: formData
});
}
// Lire le texte de la réponse d'abord pour déboguer
const responseText = await response.text();
console.log('Réponse serveur:', responseText.substring(0, 500));
// Vérifier si la réponse est OK
if (!response.ok) {
// Essayer de parser le JSON d'erreur
try {
const errorResult = JSON.parse(responseText);
// Afficher le message d'erreur du serveur directement à l'utilisateur
formMessage.classList.remove('hidden');
formMessage.className = 'mb-6 p-4 rounded-lg bg-red-600 text-white';
formMessage.textContent = errorResult.message || `Erreur ${response.status}: ${response.statusText}`;
submitBtn.disabled = false;
submitBtn.textContent = 'Envoyer le message';
return; // Sortir de la fonction pour ne pas continuer
} catch (e) {
throw new Error(`Erreur HTTP ${response.status}: ${response.statusText}. Réponse: ${responseText.substring(0, 200)}`);
}
}
// Vérifier si PHP n'est pas exécuté (le serveur renvoie le code PHP brut)
if (responseText.trim().startsWith('<?php') || responseText.includes('<?php')) {
console.error('ERREUR: PHP n\'est pas exécuté par le serveur. Le code PHP est renvoyé brut.');
console.error('Le serveur web n\'est pas configuré pour exécuter PHP.');
// Utiliser la solution de secours : sauvegarder dans localStorage
const messageData = {
name: formData.get('name'),
email: formData.get('email'),
subject: formData.get('subject'),
message: formData.get('message'),
timestamp: new Date().toISOString()
};
// Sauvegarder dans localStorage comme solution de secours
const savedMessages = JSON.parse(localStorage.getItem('vraivex_messages') || '[]');
savedMessages.push(messageData);
localStorage.setItem('vraivex_messages', JSON.stringify(savedMessages));
// Afficher un message spécial
formMessage.classList.remove('hidden');
formMessage.className = 'mb-6 p-4 rounded-lg bg-yellow-600 text-white';
formMessage.innerHTML = '⚠️ PHP n\'est pas configuré sur le serveur. Votre message aété sauvegardé localement. <br>Veuillez nous contacter directement à <strong>contact@vraivex.fr</strong> ou consulter les messages sauvegardés dans la console du navigateur.';
// Afficher les messages sauvegardés dans la console
console.log('Messages sauvegardés localement:', savedMessages);
console.log('Pour consulter les messages, tapez dans la console: JSON.parse(localStorage.getItem("vraivex_messages"))');
return; // Sortir de la fonction
}
// Essayer de parser le JSON
let result;
try {
result = JSON.parse(responseText);
} catch (parseError) {
console.error('Erreur de parsing JSON:', parseError);
console.error('Réponse reçue:', responseText.substring(0, 500));
throw new Error('Le serveur a renvoyé une réponse invalide. Vérifiez la console pour plus de détails.');
}
// Afficher le message de résultat
formMessage.classList.remove('hidden');
if (result.success) {
formMessage.className = 'mb-6 p-4 rounded-lg bg-green-600 text-white';
formMessage.textContent = 'Message envoyé avec succès ! Nous vous répondrons dans les plus brefs délais.';
contactForm.reset();
} else {
formMessage.className = 'mb-6 p-4 rounded-lg bg-red-600 text-white';
let errorMsg = result.message || 'Une erreur est survenue. Veuillez réessayer.';
// Afficher le message de debug en développement (à retirer en production)
if (result.debug) {
console.error('Erreur détaillée:', result.debug);
}
formMessage.textContent = errorMsg;
}
} catch (error) {
formMessage.classList.remove('hidden');
formMessage.className = 'mb-6 p-4 rounded-lg bg-red-600 text-white';
// Message d'erreur plus détaillé pour le débogage
let errorMsg = 'Une erreur est survenue lors de la communication avec le serveur. ';
errorMsg += 'Veuillez réessayer plus tard ou nous contacter directement à contact@vraivex.fr';
// En mode développement, afficher plus de détails
if (error.message) {
console.error('Erreur détaillée:', error);
console.error('Message:', error.message);
console.error('Stack:', error.stack);
}
formMessage.textContent = errorMsg;
} finally {
// Réactiver le bouton
submitBtn.disabled = false;
submitBtn.textContent = 'Envoyer le message';
// Masquer le message après 5 secondes
setTimeout(() => {
formMessage.classList.add('hidden');
}, 5000);
}
});
}
// Back to Top Button functionality
const backToTopButton = document.getElementById('backToTop');
// Show/hide button based on scroll position
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
backToTopButton.classList.remove('hidden');
} else {
backToTopButton.classList.add('hidden');
}
});
// Smooth scroll to top when clicked
backToTopButton.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
</script>
</body>
</html>
