HTML : Les balises sémantiques

La balise <header> représente généralement l'en-tête d'une page web ou d'une section particulière de contenu. Elle contient des éléments tels que le logo, le titre principal, la navigation principale et d'autres informations d'en-tête.

Exemple :

<header>
    <h1>Le site à Philip</h1>
    <nav>
        <ul>
            <li><a href="/">Accueil</a></li>
            <li><a href="/about">À Propos</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </nav>
</header>
Copy

La balise <nav> est utilisée pour définir la navigation principale ou la barre de menus d'un site web. Elle contient généralement des liens vers différentes sections du site ou vers d'autres pages importantes.

Exemple :

<nav>
    <ul>
        <li><a href="/">Accueil</a></li>
        <li><a href="/about">À Propos</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>
Copy

La balise <main> représente le contenu principal d'une page web. Il ne devrait y avoir qu'une seule balise <main> par page, et elle devrait englober tout le contenu principal, à l'exclusion des en-têtes et pieds de page.

Exemple :

<main>
    <h1>Titre de la Page</h1>
    <p>Contenu principal de la page...</p>
</main>
Copy

La balise <article> est utilisée pour encadrer un contenu autonome et indépendant. Cela peut inclure des articles de blog, des commentaires, des critiques, etc. Chaque <article> doit avoir son propre sens, même s'il est présent sur la même page que d'autres articles.

Exemple :

<article>
    <h2>Titre de l'Article</h2>
    <p>Contenu de l'article...</p>
</article>
Copy

La balise <section> est utilisée pour diviser le contenu de manière sémantique en sections logiques. Elle peut être utile pour organiser le contenu en chapitres, en fonctionnalités distinctes, ou en blocs thématiques.

Exemple :

<section>
    <h2>Section 1</h2>
    <p>Contenu de la section 1...</p>
</section>

<section>
    <h2>Section 2</h2>
    <p>Contenu de la section 2...</p>
</section>
Copy

La balise <aside> est utilisée pour représenter du contenu qui est accessoire ou complémentaire au contenu principal de la page. Cela peut inclure des encarts publicitaires, des informations connexes, des citations, etc.

Exemple :

<aside>
    <h3>À ne pas manquer</h3>
    <ul>
        <li><a href="/promotion">Promotion spéciale</a></li>
        <li><a href="/conseils">Conseils pratiques</a></li>
    </ul>
</aside>
Copy

La balise <footer> représente généralement le pied de page d'une page web ou d'une section particulière de contenu. Elle peut contenir des informations de contact, des liens vers des pages importantes, des droits d'auteur, etc.

Exemple :

<footer>
    <p>&copy; 2023 Mon Site Web. Tous droits réservés.</p>
</footer>
Copy

• Amélioration de l'Accessibilité : Les balises sémantiques aident les technologies d'assistance à comprendre la structure de la page, ce qui est essentiel pour les utilisateurs malvoyants par exemple.

• Meilleur Référencement : Les moteurs de recherche utilisent également les balises sémantiques pour comprendre le contenu et l'indexer correctement.

• Maintenabilité : L'utilisation de balises sémantiques rend le code HTML plus clair et plus facile à maintenir.