Utilité

La sémantique consiste à utiliser les bonnes balises HTML pour donner du sens au contenu d’une page.

Par exemple, on utilise <h1> pour un titre principal, <nav> pour la navigation, <main> pour le contenu principal ou <footer> pour le pied de page.

Cela permet à plusieurs acteurs de mieux comprendre la structure de la page :

• Les développeurs : le code est plus clair et plus facile à maintenir.
• Les technologies d’assistance : les lecteurs d’écran pour les personnes malvoyantes peuvent mieux comprendre et parcourir la page.
• Les moteurs de recherche : la structure et l’importance des contenus sont plus faciles à interpréter.

En résumé, le HTML sémantique permet de décrire ce que représente un contenu, et pas seulement son apparence. L’apparence est ensuite gérée avec la CSS.

Zones du site

<header>

Représente le contenu introductif du site.

Il contient par exemple le logo, le titre, la navigation, la barre de recherche.

<footer>

Représente un pied-de-page.

Il contient par exemple les information légales, les adresses, des liens vers d’autres pages.

<main>

Représente le contenu principal du site.

<section>

Représente un groupe de contenu thématique.

Elle contient par exemple plusieurs articles sur le même sujet.