Une première page HTML ne doit pas seulement s’afficher correctement dans un navigateur. Elle doit aussi être compréhensible par les moteurs de recherche, utilisable au clavier et lisible par les technologies d’assistance. La bonne approche consiste à construire d’abord une structure claire, puis à ajouter le style avec CSS et les interactions avec JavaScript.
Ce guide propose une méthode progressive pour créer une page simple, mais correctement organisée : en-tête, navigation, contenu principal, sections, formulaire éventuel et pied de page. L’objectif n’est pas de mémoriser toutes les balises HTML, mais de savoir choisir la plus adaptée à chaque information.
Commencer par distinguer le contenu de sa présentation
HTML décrit la structure et le sens d’une page. CSS contrôle son apparence, tandis que JavaScript ajoute des comportements. Mélanger ces rôles dès le départ rend rapidement le fichier difficile à maintenir.
Un titre doit donc être marqué comme un titre, et non comme un simple paragraphe agrandi. Une liste doit utiliser une liste, plutôt qu’une succession de lignes séparées par des retours à la ligne. Cette distinction améliore à la fois la maintenance du projet, l’accessibilité et la compréhension du contenu par les robots d’indexation.
Avant d’écrire du code, notez les blocs nécessaires à la page. Pour une page d’accueil très simple, on peut prévoir :
- un en-tête avec le nom du site et les éléments d’identification ;
- une navigation vers les pages principales ;
- un contenu principal avec un seul titre de niveau 1 ;
- des sections organisées autour de sous-titres ;
- un pied de page contenant les informations complémentaires.
La structure minimale d’un document HTML
Un document HTML moderne commence par une déclaration indiquant qu’il utilise HTML5. Il contient ensuite un élément racine, une zone head destinée aux métadonnées et une zone body qui regroupe ce que l’internaute voit dans la page.
La zone head doit au minimum définir l’encodage des caractères, la largeur d’affichage adaptée aux mobiles et le titre de l’onglet. Une description destinée aux moteurs de recherche peut également y être ajoutée. Elle ne remplace pas un contenu de qualité, mais aide à présenter la page dans certains résultats de recherche.
<!doctype html>
<html lang=”fr”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Présentation de mon activité</title>
</head>
<body>
Contenu visible de la page
</body>
</html>
L’attribut lang=”fr” indique la langue principale du document. Il aide notamment les lecteurs d’écran à choisir une prononciation adaptée. Oublier cet attribut est une petite erreur, mais elle peut dégrader l’expérience des utilisateurs qui naviguent avec une assistance vocale.
Choisir les balises sémantiques adaptées
Les balises sémantiques donnent un rôle explicite aux grandes zones de la page. Elles sont préférables à une succession de conteneurs génériques, car elles rendent la structure plus compréhensible.
- header regroupe l’introduction d’une page ou d’une section ;
- nav contient un ensemble de liens de navigation ;
- main identifie le contenu principal unique du document ;
- section regroupe un thème cohérent, généralement avec son propre titre ;
- article convient à un contenu autonome, comme un billet ou une fiche ;
- aside contient une information complémentaire, sans être indispensable à la compréhension ;
- footer rassemble les informations de fin de page ou de section.
Ces balises ne produisent pas automatiquement une mise en page particulière. Une section n’est pas une colonne et un header n’est pas nécessairement placé en haut de l’écran : leur rôle est d’abord structurel. Le positionnement visuel sera défini plus tard avec CSS.
Une page peut ainsi être organisée de la façon suivante : un header global, un nav, un main contenant plusieurs sections, puis un footer. Si une section contient un contenu autonome qui pourrait être réutilisé ailleurs, article sera souvent plus pertinent que section.
Construire une hiérarchie de titres compréhensible
La hiérarchie des titres doit refléter l’organisation des idées. Le titre principal de la page correspond à h1. Les grandes parties utilisent h2, puis les sous-parties éventuelles h3.
Évitez de choisir un niveau de titre uniquement parce que sa taille vous plaît. La taille, la couleur et les marges se règlent avec CSS. Sauter directement d’un h2 à un h4 peut rendre la structure moins lisible pour les personnes qui parcourent la page avec les raccourcis de leur lecteur d’écran.
Une page consacrée à une activité pourrait donc suivre cette logique :
- h1 : Création de sites pour les indépendants ;
- h2 : Les prestations proposées ;
- h3 : Conception de site vitrine ;
- h3 : Optimisation d’une page existante ;
- h2 : La méthode de travail ;
- h2 : Demander un échange.
Le nombre de titres h1 n’est pas le seul élément qui compte pour le référencement. Le plus important est que la page possède un sujet identifiable et une structure cohérente. Il est néanmoins préférable de conserver un titre principal clairement identifiable pour éviter toute ambiguïté.
Ajouter des liens, des images et des formulaires accessibles
Un lien doit décrire sa destination. « Voir les tarifs » est plus utile que « Cliquez ici », surtout lorsqu’une personne consulte uniquement la liste des liens de la page. Le texte du lien doit rester compréhensible hors de son paragraphe.
Les images informatives doivent disposer d’un texte alternatif qui décrit leur contenu ou leur fonction. Une photo montrant une équipe au travail peut avoir un texte alternatif descriptif. À l’inverse, une image purement décorative peut avoir un attribut alt vide afin que le lecteur d’écran l’ignore. Répéter dans l’alt le mot-clé de la page n’apporte aucune valeur.
Un formulaire accessible associe chaque champ à une étiquette explicite. Le texte placé comme simple indication à l’intérieur d’un champ ne doit pas remplacer cette étiquette : il disparaît dès que l’utilisateur commence à saisir. Les messages d’erreur doivent également expliquer le problème et indiquer comment le corriger.
Pour les boutons, utilisez un élément dont le rôle correspond à l’action. Un bouton sert à déclencher une action dans la page ; un lien sert à aller vers une autre adresse. Cette distinction améliore le comportement au clavier et évite les interactions confuses.
Vérifier l’accessibilité avant de styliser la page
Quelques contrôles manuels permettent déjà de repérer de nombreux défauts. Commencez par parcourir la page avec la touche Tab. Le focus doit rester visible et suivre un ordre logique. Si un élément interactif est inaccessible au clavier, la page n’est pas utilisable par tout le monde.
Testez ensuite l’agrandissement du texte et l’affichage sur un écran étroit. Le contenu ne devrait pas disparaître ni imposer un défilement horizontal permanent. Vérifiez également que les titres restent compréhensibles sans dépendre de leur apparence graphique.
Une première liste de contrôle peut inclure :
- la langue du document est-elle déclarée ?
- le titre de l’onglet décrit-il réellement la page ?
- le contenu possède-t-il un seul sujet principal identifiable ?
- les titres suivent-ils une hiérarchie logique ?
- les liens indiquent-ils clairement leur destination ?
- les images utiles ont-elles un texte alternatif pertinent ?
- les champs de formulaire possèdent-ils une étiquette visible ?
- tous les éléments interactifs sont-ils accessibles au clavier ?
Les outils automatiques peuvent signaler certains problèmes, comme un attribut manquant ou un contraste insuffisant, mais ils ne comprennent pas toujours le contexte. Un texte alternatif grammaticalement correct peut rester inutile s’il ne décrit pas la fonction réelle de l’image. La vérification humaine reste donc indispensable.
Les erreurs fréquentes d’une première page
La première erreur consiste à utiliser des div pour tous les éléments. Cette balise est utile lorsqu’aucun élément sémantique ne convient, mais elle ne fournit aucune information sur le rôle du contenu. Une page composée presque exclusivement de div demande davantage d’efforts pour être comprise et maintenue.
Une autre erreur consiste à choisir les titres selon leur apparence, puis à corriger la taille avec des balises inadaptées. Cela produit souvent une structure incohérente. La solution consiste à conserver la hiérarchie logique et à gérer l’apparence dans une feuille de style.
Enfin, l’accessibilité ne doit pas être ajoutée après coup comme une couche de correction. Prévoir dès le départ une navigation au clavier, des libellés explicites et une structure de titres correcte coûte généralement moins cher que de reprendre une page déjà construite autour de comportements difficiles à modifier.
Une méthode simple pour progresser
Pour votre première page, limitez-vous à un contenu réel et à une structure courte. Écrivez d’abord le texte, identifiez son titre principal et regroupez les idées proches. Ajoutez ensuite les balises sémantiques, puis contrôlez les liens, les images et les formulaires. Le CSS ne devrait intervenir qu’après cette étape.
Ouvrez régulièrement le fichier dans plusieurs tailles d’écran et testez-le sans souris. Cette routine permet de comprendre concrètement le rôle de chaque élément au lieu d’apprendre HTML comme une simple liste de balises. Une page sobre, bien structurée et accessible constitue une base beaucoup plus solide qu’une interface visuellement riche, mais difficile à parcourir.
Maya Connect
Maya Connect est la voix éditoriale de Clic Connect. Curieuse, méthodique et attentive aux usages concrets, elle transforme les sujets numériques complexes en parcours compréhensibles et applicables. Elle relie chaque notion à un objectif précis, explicite les prérequis et distingue systématiquement les faits établis, les bonnes pratiques et les pistes à expérimenter.
