HTML5 sémantique : éléments sémantiques ou soupe de div

La soupe de div est une page construite entièrement avec des éléments <div> et <span>. Elle nécessite des noms de classe pour communiquer sa structure, ne peut pas être comprise par les lecteurs d’écran sans ces classes et ne transmet aucun sens aux moteurs de recherche.

Remplacez les divs dépourvues de sens par des éléments sémantiques qui communiquent leur fonction. La structure s’explique désormais d’elle-même et reste compréhensible sans aucun CSS.

Les éléments de titre (h1-h6) créent une structure de document. Les utilisateurs de lecteurs d’écran naviguent à l’aide des titres. Les technologies d’assistance annoncent le niveau hiérarchique. Conservez une hiérarchie logique : h1 pour le titre de la page, h2 pour les sections principales et h3 pour les sous-sections.

L’élément <time> balise les dates et les heures au moyen d’un attribut datetime lisible par machine. Les moteurs de recherche comprennent les dates des événements et les lecteurs d’écran peuvent annoncer les dates mises en forme.

L’élément <address> contient les coordonnées de contact de l’article le plus proche ou du document. Il ne s’agit pas nécessairement d’une adresse postale : une adresse e-mail, un numéro de téléphone ou un identifiant de réseau social conviennent également.

<figure> contient du contenu autonome tel que des images, des graphiques, des exemples de code ou des vidéos. <figcaption> fournit une légende sémantiquement associée à la figure.

<blockquote> marque une citation longue. Utilisez l’attribut cite pour indiquer l’URL de la source. L’élément <cite> marque le titre d’une œuvre de création (livre, article ou film).

L’association <details> + <summary> crée un composant natif d’accordéon ou de divulgation sans JavaScript. Le navigateur gère automatiquement l’ouverture et la fermeture, l’interaction au clavier et l’accessibilité.

<mark> représente un texte mis en évidence à des fins de référence, comme une occurrence dans un résultat de recherche. Cet élément est sémantiquement différent d’un texte simplement coloré en jaune avec du CSS.

Entourez les abréviations et les acronymes avec <abbr> et fournissez le terme complet dans l’attribut title. Les lecteurs d’écran et les navigateurs exposent l’intitulé complet aux utilisateurs au survol.

Les deux restent utiles. <div> est le bon choix pour un conteneur de bloc générique sans signification sémantique, comme un conteneur de mise en page ou la racine d’un composant dans React. Utilisez <span> pour les points d’accroche de style en ligne sans signification sémantique.

Remplacez la soupe de div par des éléments sémantiques : header, nav, main, article, section, aside, footer. Utilisez time pour les dates, figure/figcaption pour les médias, details/summary pour les accordéons et mark pour les mises en évidence. Réservez div et span aux conteneurs de mise en page sans signification sémantique.