Le html sémantique c'est juste du html écrit de façon à avoir du sens pour les moteurs de recherche et les lecteurs d'écrans.
L'utilisation de balises sémantiques en HTML est une pratique essentielle pour améliorer la structure et l'accessibilité de vos pages web. Mais c'est quoi une balise sémantique, pourquoi sont-elles importantes et comment pouvez-vous les utiliser correctement ? Dans cet article, nous allons explorer ces questions ensemble.

Qu'est-ce qu'une balise sémantique ?

Les balises sémantiques en HTML sont des éléments qui non seulement définissent le contenu qu'elles contiennent, mais fournissent aussi le rôle de ce contenu au sein du document. Contrairement aux balises non-sémantiques comme <div> et <span>, qui ne donnent aucune information sur le contenu qu'elles renferment, les balises sémantiques telles que <article>, <section> ou <nav> décrivent clairement leur fonction et leur rôle au sein de la page.

Pourquoi les balises sémantiques sont-elles importantes ?

1. Amélioration de l'accessibilité : Les lecteurs d'écran et autres technologies d'assistance utilisent les balises sémantiques pour mieux comprendre la structure et la hiérarchie d'une page web. Cela permet aux utilisateurs ayant des déficiences visuelles de naviguer plus facilement et donc de mieux comprendre le contenu de la page.

2. Optimisation pour les Moteurs de Recherche (SEO) : Les moteurs de recherche comme Google utilisent les balises sémantiques pour mieux indexer et classer les pages web. Une bonne structure sémantique peut donc améliorer votre positionnement dans les résultats de recherche.

3. Maintenance du code plus facile : Un code bien structuré avec des balises sémantiques est plus facile à lire et à maintenir. Cela facilite le travail des développeurs qui interviennent sur le projet, qu'il s'agisse de corrections de bugs ou d'ajouts de fonctionnalités.

Les Balises sémantiques courantes et Leur utilisation

1. <header>

Cette balise est utile pour définir un en-tete, le contenu introductif d'une page ou d'une section de page.

<header>
    <h1>Bienvenue sur Mon Blog</h1>
    <nav>
        <ul>
            <li><a href="#home">Accueil</a></li>
            <li><a href="#about">À Propos</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

2. <nav>

Elle définit un ensemble de liens de navigation. La balise <nav> est souvent utilisée dans les en-tetes afin de contenir les liens de navigations du site, dans les menus, dans les tables de matières et les index.

     <nav>
         <ul>
             <li><a href="#home">Accueil</a></li>
             <li><a href="#about">À Propos</a></li>
             <li><a href="#contact">Contacts</a></li>
         </ul>
     </nav>

3. <section>

Celle ci sert à regrouper des contenus thématiquement liés. La documentation de la balise recommande fortement de toujours de passer une balise de titre(typiquement de <h1> à <h6>) comme enfant à la balise <section> avant d'introduire le contenu principal de la section.

<section>
    <h2>Derniers Articles</h2> {/* Titre de la section */}
    <article> {/* Contenu principal de la section */}
        <h3>Titre de l'Article</h3>
        <p>Contenu de l'article...</p>
    </article>
</section>

4. <article>

La balise <article> est utile pour définir un contenu indépendant qui pourrait être distribué ou réutilisable individuellement. Cela peut etre une question ou réponse sur un forum, une article de journal ou de blog, une carte de produit, un commentaire d'utilisateur, ...
Tout comme <section>, cette balise doit contenir une balise titre enfant, elle peut en outre contenir une balise <address> contenant les informations de l'auteur ainsi que la date de publication dans l'attribut datetime de la balise <time>. Elle peut aussi contenir un <header> et un <footer>.

<article>
    <h2>Titre de l'Article</h2>
    <address>Michel Fournier</address>
    <time datetime="2018-07-07T20:00:00">20:00</time>
    <p>Contenu de l'article...</p>
</article>

5. <aside>

Conçue pour du contenu complémentaire ou des informations supplémentaires en marge du contenu princial de <main>. La balise est souvent utilisée pour contenir des menus lateraux(sidebars).

<aside>
    <h2>À Propos de l'Auteur</h2>
    <p>Informations sur l'auteur...</p>
</aside>

6. <footer>

Utile pour définir le pied de page d'une section ou d'une page web.

<footer>
<nav>
    <ul>
        <li><a href="#home">Accueil</a></li>
        <li><a href="#about">À Propos</a></li>
        <li><a href="#contact">Contacts</a></li>
    </ul>
</nav>
<p>&copy; 2024 Mon Blog. Tous droits réservés.</p>
</footer>

7. <main>

Fournit le contenu principal d'une page web. Cette balise doit etre unique par page. Il n'est pas recommandé d'y inclure les contenus redondant comme les menus lateraux, les logos ou les liens de navigation.

<main>
    <h1>Pommes</h1>
    <p>La pomme est le fruit du pommier.</p>

    <article>
        <h2>Red Delicious</h2>
        <p>
            Variété la plus retrouvée dans les supermarchés.
        </p>
        <p>…</p>
        <p>…</p>
    </article>

    <article>
        <h2>Granny Smith</h2>
        <p>Une autre variété de pommes délicieuses</p>
        <p>…</p>
        <p>…</p>
    </article>
</main>

Comment Intégrer les Balises Sémantiques dans Votre Code ?

Pour intégrer efficacement les balises sémantiques, il est essentiel de comprendre la structure logique de votre contenu. Commencez par définir les différentes sections de votre page et utilisez les balises appropriées pour chaque partie. Voici un exemple de structure sémantique pour une page web simple :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de Page Sémantique</title>
</head>
<body>
    <header>
        <h1>Bienvenue sur Mon Blog</h1>
        <nav>
            <ul>
                <li><a href="#home">Accueil</a></li>
                <li><a href="#about">À Propos</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>Derniers Articles</h2>
            <article>
                <h3>Titre de l'Article</h3>
                <p>Description de l'article...</p>
            </article>
            <article>
                <h3>Titre de l'Article</h3>
                <p>Description de l'article...</p>
            </article>
        </section>
    </main>
    <aside>
        <h2>À Propos de l'Auteur</h2>
        <p>Informations sur l'auteur...</p>
    </aside>
    <footer>
        <p>&copy; 2024 Mon Blog. Tous droits réservés.</p>
    </footer>
</body>
</html>

Les balises sémantiques jouent un rôle crucial dans la création de sites web accessibles, optimisés pour les moteurs de recherche et faciles à maintenir. En adoptant une approche sémantique pour structurer vos pages HTML, vous améliorez non seulement l'expérience utilisateur mais aussi la qualité globale de votre site. N'hésitez pas à revisiter vos projets existants et à intégrer des balises sémantiques là où cela est possible.

En comprenant et en utilisant correctement les balises sémantiques, vous ferez un pas important vers la création de contenus web de haute qualité, bénéfiques autant pour les utilisateurs que pour les moteurs de recherche. Happy coding!