HTML Sémantique et Accessibilité

1. Qu’est-ce que le HTML sémantique ?

Le HTML sémantique consiste à utiliser des balises qui décrivent correctement le rôle et le sens du contenu. Cela permet :

• aux navigateurs de mieux interpréter la page,
• aux technologies d’assistance (lecteurs d’écran) de transmettre les bonnes informations,
• aux moteurs de recherche d’optimiser le référencement (SEO).

Les balises <div> et <span> ne doivent être utilisées que pour la mise en page, pas pour représenter un sens.

<div id="header">
<div class="menu">
<div class="main">
<div class="article">
<div class="footer">

<header>
<nav>
<main>
<article>
<footer>

2. Titres et hiérarchie

Les titres doivent suivre un ordre logique pour structurer la page :

• <h1> : Titre principal de la page (un seul par page).
• <h2> : Titres des sections principales.
• <h3> : Titres des sous-sections, etc.

Exemple correct ✅ :

<h1>Recettes de cuisine</h1>
<h2>Plats principaux</h2>
<h3>Pâtes à la carbonara</h3>
<h3>Gratin dauphinois</h3>
<h2>Desserts</h2>
<h3>Tarte aux pommes</h3>

3. Texte alternatif (alt) pour les images

Chaque image doit avoir un attribut alt qui décrit son contenu de manière concise. C’est essentiel pour les lecteurs d’écran et le SEO.

<img src="chien.jpg" alt="Un chien labrador qui court dans un parc">

• ❌ Mauvais : alt="image" ou un alt vide sans raison.
• ✅ Bon : Une description courte mais précise de ce que l’image montre.

4. Formulaires accessibles

Utilisez toujours la balise <label> pour associer un champ de formulaire à sa description textuelle. L’attribut for du label doit correspondre à l’id de l’input.

<label for="email">Adresse e-mail :</label>
<input type="email" id="email" name="email">

Sans <label>, un lecteur d’écran ne saurait pas ce que le champ de saisie représente.

Exercices Interactifs

Exercice 1 – Correction de code

Corrigez le code suivant pour le rendre sémantique :

<div class="header">Bienvenue</div>
<div class="content">
  <div class="title">Mes voyages</div>
  <div class="text">Voici la liste...</div>
</div>

<header>Bienvenue</header>
<main>
  <h1>Mes voyages</h1>
  <p>Voici la liste...</p>
</main>

Exercice 2 – Images

Écrivez un texte alternatif adapté pour une image montrant une femme avec un parapluie rouge qui marche dans une rue sous la pluie.

<img src="femme-parapluie.jpg" alt="Femme avec un parapluie rouge marchant dans une rue sous la pluie">

Exercice 3 – Hiérarchie des titres

Corrigez l’ordre des titres ci-dessous :

<h1>Voyager en Europe</h1>
<h3>Italie</h3>
<h2>Rome</h2>

<h1>Voyager en Europe</h1>
<h2>Italie</h2>
<h3>Rome</h3>