Structurer la page avec des balises HTML qui disent leur rôle
Description
Ce critère vérifie que le code de votre page indique le rôle de chaque partie. iPand contrôle trois points : un élément <main> (ou role="main") et au moins deux éléments parmi <header>, <nav> et <footer> ; au moins la moitié du texte principal dans des éléments de texte (paragraphes, listes, titres, cellules de tableau, citations, légendes) ; un attribut lang valide (BCP 47) sur <html>.
Le deuxième point n’est pas évalué quand le texte principal compte moins de 100 mots.
Pourquoi c’est important pour les IA
Les balises sémantiques séparent le contenu principal de l’en-tête, du menu et du pied de page, et disent ce qu’est chaque bloc : paragraphe, liste, tableau. Un programme qui lit le code repère ainsi le texte utile de la page sans avoir à le deviner d’après sa mise en page.
- <main> distingue le contenu propre à la page de ce qui se répète sur tout le site.
- Un texte en paragraphes et en listes se découpe plus nettement qu’un texte posé dans des <div> sans rôle.
- Selon le W3C, l’attribut lang sert aux moteurs de recherche, aux outils de traduction et aux synthèses vocales.
Comment corriger
- 1 Délimitez les grandes zones de la page Entourez le contenu propre à la page d’un seul élément <main>, l’en-tête du site d’un <header>, le menu d’un <nav> et le pied de page d’un <footer>. Si votre thème n’utilise que des <div>, demandez à votre développeur ou à l’éditeur du thème de les remplacer.
- 2 Écrivez le texte en paragraphes et en listes Placez chaque paragraphe dans un <p>, les énumérations dans <ul> ou <ol> avec un <li> par élément, les données comparables dans un <table>. Évitez le texte posé directement dans des <div> ou des <span> : au moins la moitié du texte principal doit se trouver dans des éléments de texte.
- 3 Déclarez la langue de la page Ajoutez l’attribut lang à la balise <html> avec un code BCP 47 : lang="fr" pour le français, lang="fr-BE" pour le français de Belgique, lang="en" pour l’anglais. Sur un site en plusieurs langues, chaque version déclare sa propre langue.
- 4 Vérifiez la structure Dans l’outil d’inspection de votre navigateur, repérez les éléments <main>, <header>, <nav> et <footer>, puis l’attribut lang de la balise <html>. Contrôlez aussi que le texte principal se trouve dans des <p> et des <li> plutôt que dans des <div>.
À retenir
Des zones nommées, un texte en paragraphes et une langue déclarée rendent la page lisible sans deviner sa mise en page. iPand vérifie chaque jour ces trois points dans le code de la page.
