Sémantique HTML : maîtriser section, aside, nav et main

Pourquoi la sémantique HTML va révolutionner ton code

Le HTML sémantique n’est pas juste un mot à la mode : c’est la façon dont tu racontes ton contenu à ton site et aux moteurs de recherche.

Pense à ton site comme à un livre : chaque chapitre, encadré et note de bas de page a son rôle. Les balises sémantiques sont les chapitres, les sections et les notes de bas de page de ton site. Sans elles, le lecteur (humain ou machine) se perd, et ton contenu perd en clarté et accessibilité.

Encadré : "Pourquoi c’est important ?" Un HTML sémantique améliore le référencement, l’accessibilité, et facilite la maintenance de ton site à long terme.

Les bases de la sémantique HTML

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

Une balise sémantique décrit le rôle ou le type de contenu qu’elle contient, contrairement aux balises génériques comme <div> ou <span>.

Exemples de balises sémantiques importantes :

<section>
  <h2>Présentation</h2>
  <p>Ce paragraphe explique le thème de la section.</p>
</section>

• <section> : section thématique du site
• <h2> : titre de la section
• <p> : contenu de la section

Le saviez-tu ? Utiliser des balises sémantiques améliore la compatibilité avec les lecteurs d’écran pour malvoyants.

Démystifions les principales balises sémantiques

<main> : le cœur de ta page

<main>
  <article>
    <h1>Mon article principal</h1>
    <p>Le contenu central de ma page web.</p>
  </article>
</main>

• Contient le contenu principal unique
• Une seule balise <main> par page
• Ignorée par les lecteurs d’écran lors de la navigation dans les menus

💡 Astuce : <main> doit être exclusif au contenu central, évite de l’utiliser pour des sidebars ou footers.

<nav> : guide tes visiteurs

<nav>
  <ul>
    <li><a href="#accueil">Accueil</a></li>
    <li><a href="#blog">Blog</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

• Définit la navigation principale ou secondaire
• Contient généralement des liens (<a>) organisés en liste
• Crucial pour le SEO et l’accessibilité

Encadré : Le saviez-tu ? Les moteurs de recherche identifient <nav> pour extraire automatiquement les menus et générer des snippets ou tables des matières.

<section> : organiser le contenu

<section>
  <h2>Présentation de l’équipe</h2>
  <p>Chaque section doit avoir un thème clair.</p>
</section>

• Contenu thématique regroupé
• Doit avoir un titre <h2> ou <h3>
• Idéal pour découper une page longue en chapitres`

<aside> : contenu secondaire ou complémentaire

<aside>
  <h3>Conseils du jour</h3>
  <p>Astuce : utilise les balises sémantiques pour mieux organiser ton site.</p>
</aside>

• Contenu complémentaire ou secondaire
• Souvent utilisé pour les encadrés, publicités, ou infos additionnelles
• Doit pouvoir être ignoré sans perdre le sens de la page principale

<figure> et <figcaption> : médias intelligents

<figure>
  <img src="chat.png" alt="Chat mignon">
  <figcaption>Photo d’un chat pour illustrer l’exemple</figcaption>
</figure>

• <figure> contient un média (image, vidéo, SVG…)
• <figcaption> fournit une légende explicative
• Permet de relier clairement l’image à sa description

<picture> : images adaptatives

<picture>
  <source media="(min-width:800px)" srcset="grand-chat.png">
  <source media="(max-width:799px)" srcset="petit-chat.png">
  <img src="chat.png" alt="Chat mignon">
</picture>

• <picture> permet de charger l’image adaptée à l’écran
• Utilise plusieurs <source> avec conditions CSS media
• <img> de fallback obligatoire

💡 Astuce : Idéal pour sites responsive et optimisation SEO via images adaptées.

La méthode pas à pas : structurer une page complète

Objectif : Créer une page blog accessible et structurée

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Blog Sémantique</title>
</head>
<body>
  <header>
    <h1>Mon blog sur HTML sémantique</h1>
    <nav>
      <ul>
        <li><a href="#article1">Article 1</a></>
        Article 2
      
    
  

  
    
      Introduction au HTML sémantique
      Cette section explique les balises principales.
      
        
        Exemple de structure sémantique
      
    

    
      Exemples avancés
      On explore l’usage de aside et picture pour enrichir la page.
      
        Astuce : le contenu secondaire doit rester clair et non essentiel.
      
      
        
        
      
    
  

  
    © 2025 Blog HTML
  

⚠️ Les erreurs fréquentes :

💡 Astuce du jour : Une page bien structurée avec <header>, <main>, <section>, <aside> et <footer> est lisible par tout le monde, humain ou machine.

🔍 Étude de cas : mini-site portfolio

<header>
  <h1>Portfolio de Jane Doe</h1>
  <nav>
    <a href="#projets">Projets</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

<main>
  <section id="projets">
    <h2>Mes projets récents</h2>
    <article>
      <h3>Site web HTML5</h3>
      <p>Un projet structuré avec sémantique et accessibilité.</p>
    </article>
    <article>
      <>Portfolio CSS
      Mise en page responsive et balises sémantiques.
    
  

  
    Infos complémentaires
    Liste de compétences et certifications.
  



  Contact : jane@example.com

• <article> pour chaque projet autonome
• <aside> pour infos secondaires
• Navigation claire via <nav>

🧪 À toi de jouer ! Challenge pratique

Crée un mini-site personnel de 2 pages avec :

• Header et nav fonctionnel
• Au moins 2 sections principales <section>
• 1 aside avec infos secondaires
• 1 figure avec légende et image responsive <picture>

<header>
  <h1>Mon site perso</h1>
  <nav>
    <ul>
      <li><a href="#accueil">Accueil</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
    </ul>
  </nav>
</header>

<main>
  <section id="accueil">
    <h2>Bienvenue</h2>
    <p>Introduction à mon site.</p>
    
      
      Image illustrant l’accueil
    
  

  
    Mes projets
    
      Site HTML5
      Exemple de projet sémantique.
    
    
      Infos secondaires sur mes compétences.
    
  



  Contact : moi@example.com

🧭 Pour aller plus loin

• MDN Web Docs – HTML Sémantique
• W3C HTML5
• Expérimente avec <article>, <aside>, <section> et <figure>
• Teste ton site avec Lighthouse pour accessibilité et SEO

Et si tu essayais… ?

• Créer un mini-site e-learning avec navigation <nav> et contenu principal <main>
• Ajouter une galerie d’images responsive avec <picture>
• Expérimenter les micro-données pour SEO et enrichissement sémantique