Chapitre 3 : HTML5 – Éléments sémantiques
📖 Introduction <header> <nav> <main> <article> <section> <aside> <footer> Autres éléments 📝 Exemple complet

📖 Introduction aux éléments sémantiques

Les éléments sémantiques HTML5 décrivent clairement leur signification aux navigateurs et aux développeurs.

❌ Sans sémantique (HTML4)

<div id="header">En-tête</div>
<div id="nav">Menu</div>
<div id="content">Contenu</div>
<div id="footer">Pied de page</div>

On utilise des balises génériques <div> avec des id

✅ Avec sémantique (HTML5)

<header>En-tête</header>
<nav>Menu</nav>
<main>Contenu</main>
<footer>Pied de page</footer>

Des balises dédiées qui donnent du sens à la structure

🔍

SEO amélioré

Les moteurs de recherche comprennent mieux la structure

♿

Accessibilité

Les lecteurs d'écran naviguent plus facilement

📝

Code lisible

Le code est plus clair et plus maintenable

🌐

Standardisation

Structure universellement reconnue

🏷️ 3. <main> – Contenu principal

<main> Contenu unique de la page </main>

La balise <main> spécifie le contenu principal et unique d'un document. Il ne doit y avoir qu'un seul <main> par page.

📝 Exemple

<main>
    <h1>Bienvenue sur mon blog</h1>
    <p>Voici le contenu principal de la page...</p>
    <article>
        <h2>Premier article</h2>
        <p>Contenu de l'article...</p>
    </article>
</main>
⚠️ Important : Le contenu répété sur plusieurs pages (sidebar, navigation, footer) ne doit pas être dans <main>.

🏷️ 4. <article> – Article indépendant

<article> Contenu indépendant et réutilisable </article>

La balise <article> représente un contenu indépendant et autonome, qui a du sens par lui-même.

📰 Article de blog
📱 Publication sur forum
💬 Commentaire utilisateur
🃏 Carte de produit
📝 Annonce publicitaire
📰 Widget de nouvelles

📝 Exemple : Article de blog

<article>
    <header>
        <h2>Comment apprendre HTML5 rapidement</h2>
        <p>Publié le 15 Juin 2026 par John Doe</p>
    </header>
    <p>HTML5 est la dernière version du langage HTML...</p>
    <footer>
        <a href="#">Lire la suite</a>
    </footer>
</article>
✨ Aperçu

Comment apprendre HTML5 rapidement

Publié le 15 Juin 2026 par John Doe

HTML5 est la dernière version du langage HTML...

Lire la suite →

🏷️ 5. <section> – Section thématique

<section> Groupe thématique de contenu </section>

La balise <section> regroupe du contenu thématiquement lié, généralement avec un titre (<h1> à <h6>).

📌 Article vs Section

  • <article> : Contenu indépendant (peut être syndiqué)
  • <section> : Groupe thématique (dépend du contexte)

📝 Exemple : Page d'accueil avec plusieurs sections

<main>
    <section>
        <h2>Nos services</h2>
        <p>Découvrez tous nos services...</p>
    </section>
    
    <section>
        <h2>Témoignages clients</h2>
        <article>
            <h3>Client satisfait</h3>
            <p>"Excellent service !"</p>
        </article>
    </section>
    
    <section>
        <h2>Contactez-nous</h2>
        <p>Email : contact@monsite.com</p>
    </section>
</main>

🏷️ 6. <aside> – Contenu annexe

<aside> Contenu indirectement lié </aside>

La balise <aside> contient un contenu indirectement lié au contenu principal (barre latérale, notes de bas de page, publicités).

📝 Exemple : Article avec barre latérale

<article>
    <h2>Les bienfaits du CSS moderne</h2>
    <p>Le CSS moderne permet de créer des designs incroyables...</p>
    <aside>
        <h3>À savoir</h3>
        <p>CSS Grid et Flexbox sont deux technologies complémentaires.</p>
    </aside>
</article>
✨ Aperçu

Les bienfaits du CSS moderne

Le CSS moderne permet de créer des designs incroyables...

📌 À savoir

CSS Grid et Flexbox sont deux technologies complémentaires.

🏷️ 8. Autres éléments sémantiques

<mark>

Surligne du texte

<p>Le HTML5 est <mark>génial</mark> !</p>

<time>

Date/heure lisible par machine

<time datetime="2026-06-15">15 Juin 2026</time>

<figure> + <figcaption>

Illustration avec légende

<figure>
    <img src="photo.jpg" alt="Description">
    <figcaption>Légende de l'image</figcaption>
</figure>

<details> + <summary>

Contenu repliable

<details>
    <summary>Lire plus</summary>
    <p>Contenu caché...</p>
</details>

📝 Exemple : Figure avec légende

<figure>
    <img src="https://via.placeholder.com/200x150" alt="Paysage">
    <figcaption>Un magnifique paysage montagneux</figcaption>
</figure>
✨ Aperçu
Paysage

Un magnifique paysage montagneux

📝 Exemple complet : Page HTML5 sémantique

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon blog sémantique</title>
</head>
<body>
    <header>
        <h1>Mon Blog Personnel</h1>
        <p>Partage de connaissances sur le web</p>
        <nav>
            <a href="#accueil">Accueil</a>
            <a href="#articles">Articles</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>
    
    <main>
        <article>
            <header>
                <h2>Pourquoi utiliser HTML5 sémantique ?</h2>
                <p>Publié le <time datetime="2026-06-15">15 juin 2026</time></p>
            </header>
            <p>HTML5 introduit des balises sémantiques qui améliorent le SEO et l'accessibilité...</p>
            <aside>
                <h3>À noter</h3>
                <p>Les moteurs de recherche analysent ces balises pour mieux comprendre votre contenu.</p>
            </aside>
            <footer>
                <p>Catégorie : Développement Web</p>
            </footer>
        </article>
        
        <section>
            <h2>Articles récents</h2>
            <article>
                <h3>Les bases de CSS Grid</h3>
                <p>Un guide complet pour débuter avec CSS Grid Layout...</p>
                <a href="#">Lire l'article →</a>
            </article>
            <article>
                <h3>Flexbox vs Grid</h3>
                <p>Quand utiliser Flexbox et quand utiliser Grid ?</p>
                <a href="#">Lire l'article →</a>
            </article>
        </section>
    </main>
    
    <aside>
        <h3>À propos</h3>
        <p>Je suis un développeur passionné partageant mon expérience.</p>
        <h3>Suivez-moi</h3>
        <nav>
            <a href="#">Twitter</a>
            <a href="#">GitHub</a>
            <a href="#">LinkedIn</a>
        </nav>
    </aside>
    
    <footer>
        <p>© 2026 Mon Blog - Tous droits réservés</p>
        <nav>
            <a href="#">Mentions légales</a>
            <a href="#">Contact</a>
        </nav>
    </footer>
</body>
</html>

📊 Structure visuelle de la page

└── <body>
├── <header>
│ ├── <h1>
│ ├── <p>
│ └── <nav>
├── <main>
│ ├── <article>
│ │ ├── <header>
│ │ ├── <p>
│ │ ├── <aside>
│ │ └── <footer>
│ └── <section>
│ └── <article> (×2)
├── <aside> (secondaire)
└── <footer>

📝 Résumé du chapitre

Balise Signification Utilisation typique
<header> En-tête Logo, titre, navigation
<nav> Navigation Menu principal, liens de navigation
<main> Contenu principal Contenu unique de la page (1 seul)
<article> Article Article de blog, commentaire, publication
<section> Section Groupe thématique de contenu
<aside> Annexe Barre latérale, notes, publicités
<footer> Pied de page Copyright, liens légaux, contact

📌 Quiz de vérification

Question 1 : Quelle balise doit-on utiliser pour le contenu principal unique d'une page ?

📖 Voir la réponse
✅ Réponse

<main> – Il ne doit y avoir qu'un seul <main> par page.

Question 2 : Quelle est la différence entre <article> et <section> ?

📖 Voir la réponse
✅ Réponse

<article> est un contenu indépendant (réutilisable ailleurs), <section> est un groupe thématique dépendant du contexte.

Question 3 : Quelle balise est utilisée pour une barre latérale ?

📖 Voir la réponse
✅ Réponse

<aside> – Pour un contenu indirectement lié au contenu principal.

Question 4 : Quels types d'informations trouve-t-on généralement dans un <footer> ?

📖 Voir la réponse
✅ Réponse

Copyright, mentions légales, politique de confidentialité, liens de contact.

📘 Prochain chapitre : HTML5 – Formulaires avancés