Structurer une page HTML correctement
Une bonne structure HTML aide les utilisateurs, les technologies d’assistance et les moteurs. Méthode pas à pas : squelette, head, landmarks, titres et checklist.
Yanis ELMALEH8 min de lecture
Écrit par
Une bonne structure HTML aide les utilisateurs, les technologies d’assistance et les moteurs. Méthode pas à pas : squelette, head, landmarks, titres et checklist.
Écrit par
Une page HTML « correcte », ce n’est pas seulement une page qui s’affiche. C’est un document ordonné, compréhensible sans CSS, navigable au clavier, prêt pour le SEO et l’accessibilité, et assez clair pour qu’une équipe puisse le faire évoluer sans peur.
Ce guide propose une méthode pour structurer une page HTML correctement : doctype, head, body, sections, listes, formulaires — avec une checklist pour débutants exigeants. L’idée n’est pas de tout mémoriser d’un coup, mais d’avoir un rituel de construction.
Quand vous structurez une page, vous répondez à quatre questions :
h1, contenu principal)Une structure solide réduit aussi le coût du CSS et du JavaScript : moins de contorsions, sélecteurs plus stables, composants réutilisables.
En pratique, une page bien structurée se reconnaît en trois gestes simples : ouvrir le plan de titres dans les outils de développement, naviguer au clavier sans souris, et désactiver le CSS. Si le contenu reste ordonné et compréhensible, vous êtes sur la bonne voie. Si tout s’effondre en un tas de blocs anonymes, la structure n’était qu’un effet de style.
Cette méthode s’applique aussi bien à une landing marketing qu’à un article de blog, une fiche produit ou une page de documentation. Seuls changent la densité de sections et la présence éventuelle de formulaires ou de tableaux de données.
Commencez toujours par un document HTML5 valide :
<!DOCTYPE html><html lang="fr"> (adaptez la langue)<head>…</head><body>…</body>Le lang n’est pas cosmétique : il influence la synthèse vocale, la césure, parfois le SEO.
Minimum raisonnable :
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title> unique et descriptifdefer)Évitez les titres d’onglet génériques. « Nos services | Nom de marque » bat « Document ».
Esquissez :
header (marque, nav principale, éventuellement recherche)main (un seul) avec le contenu unique de la pagefooter (liens secondaires, mentions)Ajoutez nav, aside, section, article quand le sens est réel — pas pour « faire joli dans l’inspecteur ».
Écrivez le plan avant le remplissage :
h1 : sujet de la pageh2 : grandes partiesh3 : sous-partiesPas de trous artificiels. Pas de titres vides. Pas de titre uniquement pour la taille visuelle.
Paragraphes (p), listes (ul/ol), citations, tableaux de données (pas de layout), images avec alt, vidéos avec alternatives. Préférez des listes à des paragraphes de puces improvisées.
Chaque champ a un label visible. Groupes liés via fieldset / legend si besoin. Bouton de soumission réel (button type="submit"). Messages d’erreur prévus dans la structure (même si le style vient plus tard).
Le contenu critique doit exister en HTML. JS enrichit. Si le script échoue, la page reste utilisable pour l’essentiel (lecture, navigation, parfois soumission classique).
Sur un site réel, header et footer sont partagés. Le piège classique : un h1 placé dans le template (« Bienvenue ») qui se répète sur toutes les pages. Gardez dans le layout ce qui est commun ; laissez le h1 et le main au contenu spécifique de chaque URL.
Pensez aussi aux états : page d’erreur 404 avec une structure aussi soignée que le reste, page de recherche avec résultats en liste, page légale avec titres clairs. La cohérence de structure rassure l’utilisateur et simplifie l’analyse SEO.
Les textes de liens, les libellés de boutons et les intitulés de sections font partie de la structure perçue. « En savoir plus » répété dix fois sans contexte proche est un anti-pattern. Preferez des libellés qui restent compréhensibles hors contexte visuel : « En savoir plus sur l’offre Pro », « Télécharger la brochure PDF ».
Objectif : page contact claire, accessible, SEO correct.
Structure retenue :
header + nav (Accueil, Services, Contact actif)main
h1 « Contact »section « Nous écrire » avec formulaire (nom, email, message, consentement)section « Venir nous voir » avec adresse en texte + éventuelle carte (iframe titrée, alternative textuelle)footer avec liens légaux et réseauxPoints de vigilance tenus : label sur chaque champ, type="email", textarea dimensionné, bouton « Envoyer », titre d’onglet « Contact | Nom PME », lang="fr".
Pour apprendre ce type d’intégration de bout en bout, Academy Yunt guide la progression HTML puis CSS. Pour faire réaliser un site vitrine ou un tunnel de contact soigné, Agency part du contenu et de la structure. Si vos pages actuelles sont incohérentes (templates cassés, formulaires inaccessibles), un audit priorise les corrections.
Variante du même cas : une page « Demander un devis » avec étapes. Même si l’UI devient un tunnel multi-écrans en JavaScript, gardez une base HTML progressive : chaque étape peut être une section titrée, les champs restent labellisés, le résumé final est du texte réel. Ainsi, même une version dégradée reste compréhensible, et les tests d’accessibilité ont quelque chose de solide à mordre.
Peindre avant d’avoir des murs. Vous compensez ensuite avec des wrappers inutiles.
mainSans région principale, la navigation « aller au contenu » et certains outils d’assistance perdent un repère majeur.
Sauter de h1 à h4, ou mettre un h2 avant le h1 dans le DOM. Relisez le outline.
Des lignes séparées par des <br> pour simuler une liste. Utilisez ul/ol.
Encore vus dans d’anciens newsletters ou exports. Pour le layout : CSS (flex, grid).
Ils retardent le rendu. defer, placement réfléchi, mesure de perf.
Adresse, prix, horaires : le texte HTML d’abord. Les images illustrent.
lang correcttitle uniquemainh1 cohérentalt adaptésRemplacez le faux texte tôt. Vous verrez les titres trop longs et les besoins de sous-sections.
Deux nav ? Ajoutez des labels accessibles distincts (primaire / pied de page).
Le layout d’équipe (header/footer) ne doit pas imposer un h1 générique sur toutes les pages. Le h1 appartient au contenu de la page.
Un fichier d’exemple page-template.html dans le repo vaut mieux que la mémoire collective. L’écosystème Yunt encourage ces artefacts de qualité partagés entre formation et delivery.
Tabulation logique, focus visible, zoom 200 % sans catastrophe. La structure y contribue autant que le CSS.
Une fois par sprint, prenez une page livrée et relisez uniquement le HTML généré (pas le framework). Posez trois questions : où est le main ? Quel est le plan de titres ? Un utilisateur clavier peut-il tout faire ? Ce rituel coûte peu et évite la dérive « tout en composants opaques ».
Pour la référence, voyez la documentation HTML de MDN. Pour approfondir les zones de la page, lisez aussi :
Presque toujours pour un site multi-pages. Gardez-les cohérents, mais adaptez la nav active et le h1 au contexte.
article : contenu autonome (billet, carte produit réutilisable). section : partie thématique d’une page, idéalement titrée. En cas de doute, section + titre clair.
Autant que la profondeur réelle du contenu. Au-delà de h3/h4, demandez-vous si la page ne devrait pas être découpée.
Indentation lisible oui — pour les humains. Les minifiers s’occupent de la prod. Ne sacrifiez pas la relecture.
Oui, mais relisez le HTML exporté. Corrigez landmarks, titres, labels. Le builder n’absout pas la responsabilité.
Structurer une page HTML correctement, c’est suivre un rituel : squelette valide, head utile, landmarks, plan de titres, contenu réel, formulaires labellisés, enrichissements JS non bloquants. Cette discipline rend les pages plus accessibles, plus référencables et plus simples à maintenir.
Prenez la checklist, appliquez-la à une page, puis à un template d’équipe. Pour aller plus loin avec méthode, Academy Yunt est le prochain pas naturel.