Please enable JavaScript.
Coggle requires JavaScript to display documents.
Structuration du contenu sémantique, Carte réalisée par Stéphane Arrami…
Structuration du contenu sémantique
Balises sémantiques principales
<header> – En-tête principal du site ou d'une section
<nav> – Menu de navigation principale
<main> – Contenu principal unique à la page
<article> – Bloc de contenu indépendant (ex: photo, article)
<section> – Regroupement thématique de contenu
<footer> – Pied de page du site ou d'une section
Hiérarchie et organisation
Un seul <main> par page
Plusieurs <article> ou <section>
Structure logique et accessible
Bonne utilisation des titres Hn (<h1> à <h6>)
Accessibilité & SEO
Meilleure compréhension contextuelle par Google
Amélioration du parsing des lecteurs d'écran
Utilisation de ARIA (en complément) si nécessaire
Réduction du "bruit" dans le DOM
Bonnes pratiques
Éviter les <div> génériques quand on peut utiliser du sémantique
Utiliser des landmarks pour aider les utilisateurs malvoyants
Vérifier la structure avec les outils d'audit (Lighthouse, axe DevTools)
Associer les labels aux formulaires pour un meilleur référentiel sémantique
Carte réalisée par Stéphane Arrami –
stephane-arrami.com
– Licence CC BY-NC-SA