← Retour au cours : HTML de Zéro à Héros

⚠️ Mode Visiteur : Vous lisez ce cours gratuitement. Créez un compte pour sauvegarder votre progression et obtenir des badges ! 🏆

HTML5 sémantique et bonnes pratiques

Structurer vos pages avec HTML5 sémantique

HTML5 introduit des balises sémantiques qui donnent du sens à la structure de vos pages.

Pourquoi la sémantique ?

Accessibilité : Les lecteurs d'écran comprennent mieux
SEO : Les moteurs de recherche indexent mieux
Maintenabilité : Code plus clair et compréhensible

Structure HTML5 typique

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon Site</title>
</head>
<body>
    <header>
        <nav>
            <!-- Menu de navigation -->
        </nav>
    </header>
    
    <main>
        <article>
            <!-- Contenu principal -->
        </article>
        
        <aside>
            <!-- Contenu secondaire -->
        </aside>
    </main>
    
    <footer>
        <!-- Pied de page -->
    </footer>
</body>
</html>

Les balises sémantiques

<header> : En-tête de la page ou d'une section

<header>
    <h1>Mon Site Web</h1>
    <p>Slogan du site</p>
</header>

<nav> : Navigation principale

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

<main> : Contenu principal (un seul par page)

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

<article> : Contenu autonome (article de blog, produit)

<article>
    <h2>Titre de l'article</h2>
    <p>Publié le <time datetime="2024-02-08">8 février 2024</time></p>
    <p>Contenu de l'article...</p>
</article>

<section> : Section thématique

<section>
    <h2>Nos services</h2>
    <p>Description des services...</p>
</section>

<aside> : Contenu annexe (sidebar, publicité)

<aside>
    <h3>Articles reliés</h3>
    <ul>
        <li><a href="/article-1">Article 1</a></li>
        <li><a href="/article-2">Article 2</a></li>
    </ul>
</aside>

<footer> : Pied de page

<footer>
    <p>© 2024 Mon Site. Tous droits réservés.</p>
    <nav>
        <a href="/mentions">Mentions légales</a>
        <a href="/privacy">Confidentialité</a>
    </nav>
</footer>

Balises de contenu HTML5

<!-- Détails dépliables -->
<details>
    <summary>En savoir plus</summary>
    <p>Contenu caché qui se déplie au clic.</p>
</details>

<!-- Barre de progression -->
<progress value="70" max="100">70%</progress>

<!-- Jauge -->
<meter value="6" min="0" max="10">6 sur 10</meter>

<!-- Date et heure -->
<time datetime="2024-02-08T14:30">8 février 2024 à 14h30</time>

Exemple de page blog complète

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon Blog</title>
</head>
<body>
    <header>
        <h1>Mon Blog Tech</h1>
        <nav>
            <a href="/">Accueil</a>
            <a href="/articles">Articles</a>
            <a href="/about">À propos</a>
        </nav>
    </header>
    
    <main>
        <article>
            <header>
                <h2>Apprendre HTML5 en 2024</h2>
                <p>Par <strong>John Doe</strong> - 
                   <time datetime="2024-02-08">8 février 2024</time>
                </p>
            </header>
            
            <p>HTML5 apporte de nombreuses améliorations...</p>
            
            <footer>
                <p>Tags: HTML, Web, Tutoriel</p>
            </footer>
        </article>
        
        <aside>
            <h3>Articles populaires</h3>
            <ul>
                <li><a href="/css">CSS Moderne</a></li>
                <li><a href="/js">JavaScript ES6</a></li>
            </ul>
        </aside>
    </main>
    
    <footer>
        <p>© 2024 Mon Blog. Tous droits réservés.</p>
    </footer>
</body>
</html>

Bonnes pratiques HTML

Un seul <h1> par page
Hiérarchie logique des titres (h1 → h2 → h3...)
Un seul <main> par page
Utiliser <article> pour du contenu réutilisable
Valider votre HTML sur validator.w3.org
Toujours spécifier l'attribut lang
Utiliser des balises sémantiques plutôt que des <div>

Points clés

HTML5 sémantique améliore SEO et accessibilité
<header>, <nav>, <main>, <footer> structurent la page
<article> pour contenu autonome
<section> pour regrouper du contenu thématique
Un seul <main> par page

📝 Vous avez terminé cette leçon ?

Créez un compte gratuit pour sauvegarder votre progression !

Créer un compte gratuit