Le HTML sémantique signifie utiliser des éléments qui décrivent le sens de leur contenu, pas seulement son apparence. Un <nav> dit « c'est de la navigation » ; un <button> dit « c'est cliquable » — tandis qu'un <div> ne dit rien.
Home
Home
Les deux peuvent être stylisés de manière identique, mais seul le second est compris par les navigateurs, les lecteurs d'écran et les moteurs de recherche.
<header>, <nav>, <main>, <footer>, permettant aux utilisateurs de sauter entre les régions. Un mur de <div> ne leur donne rien.<h1>, <article>, <main> et comprennent la structure de la page.<button> est focalisable, activable au clavier (Entrée/Espace), et annoncé comme un bouton — un <div onclick> n'est rien de cela à moins que vous ne le réajoutiez entièrement à la main.<header> <nav> <main> <article> <section> <aside> <footer>
<figure> <figcaption> <time> <mark> <button> <h1>–<h6>
La règle d'or : optez pour l'élément qui signifie ce que vous avez l'intention de faire, et utilisez uniquement <div>/<span> comme conteneurs de style lorsqu'aucun élément sémantique ne convient.
C'est la victoire la moins coûteuse en accessibilité et SEO que vous puissiez réaliser.