Deux blocs visuellement identiques à l’écran peuvent raconter une histoire très différente au code qui les lit : un lecteur d’écran, un moteur de recherche ou un script d’analyse comprend immédiatement qu’une balise <nav> contient un menu, alors qu’une simple <div> ne dit rien de son rôle sans classe ou attribut supplémentaire.
Les balises les plus utiles
HTML5 a introduit une famille dédiée à la structure d’une page : <header>, <nav>, <main>, <article>, <aside> et <footer> couvrent la majorité des besoins d’un gabarit :
<article>
<header>
<h1>Titre de l'article</h1>
</header>
<p>Contenu de l'article.</p>
</article>Les gabarits générés par WordPress, aussi bien les thèmes classiques que les thèmes à blocs, s’appuient massivement sur ces balises pour structurer l’en-tête, le contenu principal et le pied de page du site.
Bon à savoir
- Ces balises n’apportent en général aucun style visuel par défaut : leur intérêt est purement structurel, à charge du CSS de définir l’apparence.
- Utiliser
<article>pour un contenu qui aurait du sens isolé de son contexte (un article de blog, un commentaire) est une convention plus précise qu’une simple<section>générique. - Une page ne devrait comporter qu’un seul élément
<main>, réservé au contenu réellement central de la page, distinct des menus, encarts latéraux ou pieds de page qui l’entourent. - Empiler des
<div>partout là où une balise sémantique existe déjà revient à se priver, sans bénéfice réel, des annonces automatiques que les lecteurs d’écran font pour ces structures reconnues.