26. Mise en page sémantique HTML5 : Le "Pourquoi"

Avant le HTML5, les développeurs s'appuyaient massivement sur des éléments <div> génériques avec des IDs descriptifs (ex: <div id="header">). Le HTML5 a introduit des éléments sémantiques pour décrire le sens du contenu, et non seulement sa présentation.

26.1 Qu'est-ce que la sémantique ?

La sémantique signifie "sens". Un élément sémantique décrit clairement son contenu à la fois au navigateur et au développeur.

• Non sémantique : <div> (Ne dit rien sur le contenu à l'intérieur).
• Sémantique : <header> (Indique clairement que le contenu à l'intérieur est l'introduction de la page ou de la section).

26.2 Avantages du HTML sémantique

1. Accessibilité : Les lecteurs d'écran utilisent ces balises pour aider les utilisateurs malvoyants à naviguer efficacement dans la page.
2. SEO (Search Engine Optimization) : Les moteurs de recherche privilégient le contenu à l'intérieur des éléments sémantiques pour mieux comprendre le sujet et la structure de votre page.
3. Lisibilité pour le développeur : Le code devient beaucoup plus facile à comprendre pour les autres développeurs (et pour vous-même à l'avenir).

Dans les prochaines leçons, nous remplacerons les structures div courantes par leurs équivalents sémantiques HTML5.