La structure de base d’une page HTML
Créer sa première page HTML et améliorer son accessibilité
Lancer votre aventure dans le développement web commence par la création d’une page HTML simple. Non seulement il est important de comprendre la structure de base d’une page web, mais il est aussi essentiel d’optimiser son accessibilité pour que tous les utilisateurs puissent profiter de votre contenu. Dans cet article, nous allons construire une page HTML étape par étape, détailler le rôle de chaque balise et vous donner des conseils pour rendre votre site plus accessible.
1. La structure de base d’une page HTML
Chaque page HTML repose sur une structure fondamentale.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma première page HTML accessible</title>
</head>
<body>
<header>
<h1>Bienvenue sur mon site</h1>
<nav>
<ul>
<li><a href="#accueil">Accueil</a></li>
<li><a href="#apropos">À propos</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="accueil">
<h2>Introduction</h2>
<p>Ceci est ma première page HTML créée pour apprendre les bases du web.</p>
</section>
<section id="apropos">
<h2>À propos</h2>
<p>Découvrez comment structurer un contenu web en utilisant des balises adaptées pour améliorer la lisibilité et l’accessibilité.</p>
<img src="image_exemple.jpg" alt="Exemple d'image pour illustrer le contenu">
</section>
</main>
<footer>
<p>© 2025 - Tous droits réservés</p>
</footer>
</body>
</html>
2. Explication détaillée des balises
a. La déclaration et les éléments principaux
<!DOCTYPE html>Cette ligne, placée tout en haut, informe le navigateur que le document est en HTML5, garantissant ainsi l’activation du mode standard de rendu.<html lang="fr">La balise racine qui enveloppe tout le contenu de la page. L’attributlang="fr"définit la langue principale, aidant ainsi les moteurs de recherche et les technologies d’assistance.<head>Contient toutes les métadonnées non affichées directement sur la page. On y trouve notamment :<meta charset="UTF-8">: Assure la bonne lecture des caractères spéciaux (accents, symboles…).<title>: Le titre de la page affiché dans l’onglet du navigateur.
<body>C’est dans cette balise que se trouve le contenu visible par l’utilisateur : textes, images, liens, etc.
b. Les balises sémantiques HTML5
L’utilisation des balises sémantiques améliore la clarté de votre code et l’accessibilité de votre page :
<header>Contient l’en-tête de la page (titre, logo, navigation). Cela permet aux utilisateurs et aux lecteurs d’écran de comprendre dès le départ le contexte et l’identité du site.<nav>Regroupe les liens de navigation principaux. Une barre de menu claire aide l’utilisateur à se déplacer facilement sur le site.<main>Englobe le contenu central unique de la page. Les technologies d’assistance se focalisent sur cette section pour extraire l’information essentielle.<section>Permet de diviser le contenu en parties logiques, par exemple une section pour l’introduction, une autre pour la présentation d’informations complémentaires.<footer>Regroupe les informations en bas de page telles que les mentions légales, crédits ou coordonnées. Il conclut le contenu de façon structurée.- Balises de contenu additionnel
<p>pour les paragraphes de texte.<a>pour créer des liens hypertextes.<img>pour insérer des images (avec l’attributaltdécrivant l’image).<ul>,<ol>,<li>pour organiser des listes non ordonnées ou ordonnées.
3. Comment améliorer l’accessibilité de votre page web
Garantir que votre site web soit accessible à toutes et à tous est fondamental. Voici quelques bonnes pratiques à adopter :
a. Exploiter la structure sémantique
- Utilisation des balises HTML5 sémantiques Comme vu précédemment, l’emploi de
<header>,<nav>,<main>,<section>et<footer>aide les outils d’assistance à détecter la structure et la hiérarchie de votre page.
b. Fournir des alternatives textuelles
- Images Chaque
<img>doit comporter un attributaltdescriptif qui explique ce que l’image représente, permettant ainsi aux lecteurs d’écran de restituer l’information. - Contenus multimédias Pour les vidéos ou autres formats interactifs, fournir des sous-titres et des transcriptions est indispensable.
c. Améliorer le contraste et la lisibilité
- Choix des couleurs Veillez à ce que les couleurs de fond et du texte présentent un contraste suffisant pour faciliter la lecture, en particulier pour les personnes malvoyantes.
- Typographie Utilisez des polices de caractères lisibles et ajustez la taille du texte afin d’offrir une meilleure expérience.
d. Optimiser la navigation au clavier
- Focus visible Tous les éléments interactifs (liens, boutons, champs de formulaire) doivent montrer un indicateur de focus afin que les utilisateurs naviguant au clavier sachent où ils se trouvent.
- Ordre de tabulation logique L’attribut
tabindexpeut être utilisé pour définir une séquence de navigation intuitive, essentielle pour que la navigation soit fluide.
e. Exploiter les attributs ARIA et labels
- Attributs ARIA Ils enrichissent la sémantique d’éléments qui pourraient être ambigus, par exemple en définissant des rôles comme
role="navigation"ourole="main". - Labels pour formulaires Chaque champ de formulaire doit être associé à une balise
<label>, rendant ainsi l’interaction plus intuitive pour les technologies d’assistance.
f. Tester et auditer l’accessibilité
- Outils de test Utilisez des outils comme WAVE, Axe ou Lighthouse pour identifier les problèmes d’accessibilité dans votre code et améliorer constamment votre site.
4. Tableau récapitulatif des balises et conseils
| Élément | Rôle principal |
|---|---|
<!DOCTYPE html> | Déclare la version HTML (HTML5) et active le mode standard. |
<html lang="fr"> | Enveloppe tout le document et définit la langue principale du contenu. |
<head> | Contient les métadonnées (titre, encodage, liens vers CSS/JS) dont le <meta charset="UTF-8"> et <title>. |
<body> | Renferme le contenu visible par l’utilisateur. |
<header> | Regroupe l’en-tête du site (titre, logo, navigation). |
<nav> | Structure la navigation du site avec des liens. |
<main> | Contient le contenu principal unique, facilitant ainsi la lecture par les aides techniques. |
<section> | Divise le contenu en parties logiques pour une meilleure organisation. |
<footer> | Présente le pied de page avec les informations complémentaires (mentions légales, crédits, …). |
<p>, <a>, <img>, <ul>, <ol>, <li> | Permettent respectivement de structurer du texte, de créer des liens, d’insérer des images et d’organiser des listes. |
| Accessibilité | Conseils |
|---|---|
| Alternatives textuelles | Utiliser systématiquement l’attribut alt pour les images et fournir des transcriptions pour les médias. |
| Contraste et typographie | Choisir des couleurs et des polices offrant un contraste suffisant et une lisibilité optimale. |
| Navigation au clavier | Garantir un focus visible et un ordre de tabulation logique pour ceux qui naviguent sans souris. |
| Attributs ARIA et labels | Enrichir la sémantique avec des rôles ARIA et associer chaque champ de formulaire à un <label>. |
| Tests d’accessibilité | Auditer régulièrement la page avec des outils spécialisés (WAVE, Axe, Lighthouse). |
5. En conclusion
Créer sa première page HTML est une étape passionnante qui vous ouvre la porte sur l’univers du développement web. En respectant une structure claire grâce aux balises sémantiques et en appliquant les bonnes pratiques d’accessibilité, vous facilitez l’accès à votre contenu pour tous les utilisateurs, y compris ceux en situation de handicap. L’expérimentation, le test et l’amélioration continue sont les clés pour progresser dans la conception de sites web inclusifs et performants.
N’hésitez pas à explorer davantage en associant ces fondations avec des technologies comme CSS pour le design et JavaScript pour l’interactivité. Ainsi, votre site sera non seulement fonctionnel et esthétique mais également accessible à un public toujours plus large.
Bonne programmation, Cédric.
