HTML sémantique.

HTML sémantique et SEO

Le HTML sémantique consiste à utiliser les éléments HTML de façon significative, pour communiquer au mieux la structure et la hiérarchie d’une page web aux robots des moteurs de recherche.

Cela améliore l’accessibilité et donc l’indexation par les moteurs, grâce à un code structuré, favorable au référencement naturel, avec des balises qui définissent sans ambiguïté le rôle de chaque élément de la page.

Les éléments du HTML sémantique

Voyons les éléments clés qui distinguent le HTML sémantique du HTML traditionnel, et les bonnes pratiques pour améliorer la structure côté SEO :

• Utiliser des balises sémantiques : utilise des balises comme <header>, <footer>, <nav>, <article>, <section>, <aside>, <main>, etc., pour délimiter clairement les sections de la page et leur rôle.
• Structure logique : organise le contenu de manière logique et hiérarchique. Par exemple, utilise <h1> pour les titres principaux, <h2> pour les sous-titres, et ainsi de suite, pour refléter la structure du contenu.
• Décrire le contenu : utilise les balises adaptées au type de contenu. Par exemple, <p> pour les paragraphes, <ul> et <ol> pour les listes non ordonnées et ordonnées, <figure> et <figcaption> pour les images avec légende, etc.
• Attributs sémantiques : utilise des attributs comme alt pour fournir un texte alternatif aux images ou title pour donner des informations supplémentaires sur les liens, afin d’améliorer l’accessibilité et l’expérience utilisateur.
• Éviter l’abus de balises génériques : évite d’abuser de balises génériques comme <div> et <span> quand des balises sémantiques plus précises sont adaptées et disponibles.

Exemple de HTML sémantique

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la page</title>
</head>
<body>
    <header>
        <h1>En-tête principal</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section id="home">
            <h2>Home</h2>
            <p>Contenu de la section Home...</p>
        </section>

        <section id="about">
            <h2>About</h2>
            <p>Contenu de la section About...</p>
        </section>

        <section id="contact">
            <h2>Contact</h2>
            <p>Contenu de la section Contact...</p>
        </section>
    </main>

    <footer>
        <p>Pied de page</p>
    </footer>
</body>
</html>

Dans cet exemple :

• Nous avons utilisé des balises sémantiques comme <header>, <nav>, <main>, <section> et <footer> pour donner à la page une structure plus significative.
  • La balise <main> définit explicitement le contenu principal
• Les balises <h1> et <h2> sont utilisées respectivement pour le titre principal et les sous-titres.
• La balise <nav> contient une liste de liens de navigation.
• Chaque section (Home, About, Contact) est contenue dans une balise <section> avec un titre adapté.
• Le contenu principal de la page se trouve dans la balise <main>.
• Des attributs id ont été ajoutés pour la navigation interne.
• La balise <footer> contient le pied de page.

Comme nous l’avons vu, le HTML sémantique apporte de vrais avantages SEO, mais ses bénéfices ne s’arrêtent pas là : c’est un levier puissant pour l’accessibilité, avec une expérience nettement meilleure aussi pour les personnes en situation de handicap, car les lecteurs d’écran interprètent plus facilement les sections de la page.

En combinant HTML sémantique, textes alternatifs sur les images, rôles ARIA (Accessible Rich Internet Applications) et une meilleure accessibilité au clavier, on construit un web plus simple et surtout plus inclusif.

Pour compléter l’optimisation du code, en plus des éléments HTML sémantiques et de la meilleure navigabilité qu’ils offrent aux Spiders, il est essentiel d’intégrer les données structurées. Elles fournissent des informations détaillées au moteur de recherche et lui permettent de classer plus précisément ton projet.