Prérequis
- Niveau : aucune connaissance préalable.
- Matériel : un ordinateur, un éditeur de texte (idéalement VS Code) et un navigateur.
- Lecture utile avant : Créer votre première page HTML5 de A à Z.
- Temps estimé : 20 à 30 minutes pour parcourir, plusieurs heures pour pratiquer chaque famille de balises.
Pourquoi connaître les balises HTML ?
Connaître les balises HTML, c’est connaître l’alphabet du web. Sans elles, pas de structure, pas de SEO, pas d’accessibilité. Cette page est conçue comme une fiche de référence à garder sous le coude pendant vos premiers projets.
HTML : le squelette de toute page web
HTML (HyperText Markup Language) est le langage qui structure le contenu d’une page web. Chaque élément (titre, paragraphe, image, lien) est défini par une balise. Voici toutes les balises indispensables.
Structure de base d’une page HTML
<!DOCTYPE html> <!-- Indique que c'est du HTML5 -->
<html lang="fr"> <!-- Langue de la page -->
<head>
<meta charset="UTF-8"> <!-- Encodage des caractères (accents) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Description de la page pour Google">
<title>Titre de la page (onglet du navigateur)</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Tout le contenu visible va ici -->
</body>
</html>Balises de texte
<!-- Titres : h1 (le plus important) à h6 (le moins important) -->
<h1>Titre principal (1 seul par page pour le SEO)</h1>
<h2>Sous-titre de section</h2>
<h3>Sous-sous-titre</h3>
<!-- Paragraphes -->
<p>Ceci est un paragraphe. Le navigateur ajoute automatiquement un espace avant et après.</p>
<!-- Mise en forme du texte -->
<strong>Texte important (gras)</strong>
<em>Texte mis en emphase (italique)</em>
<mark>Texte surligné</mark>
<small>Texte plus petit</small>
<del>Texte barré</del>
<code>Code informatique</code>
<!-- Saut de ligne et ligne horizontale -->
<br> <!-- Saut de ligne -->
<hr> <!-- Ligne de séparation -->Liens et navigation
<!-- Lien vers une autre page -->
<a href="https://itskillscenter.io">Visitez ITSkillsCenter</a>
<!-- Lien qui s'ouvre dans un nouvel onglet -->
<a href="https://google.com" target="_blank" rel="noopener">Google</a>
<!-- Lien vers une section de la même page -->
<a href="#contact">Aller à la section contact</a>
<section id="contact">...</section>
<!-- Lien email et téléphone -->
<a href="mailto:contact@itskillscenter.io">Nous écrire</a>
<a href="tel:+221771234567">Nous appeler</a>Images
<!-- Image basique -->
<img src="photo.jpg" alt="Description de l'image" width="600" height="400">
<!-- alt est OBLIGATOIRE :
- Décrit l'image pour les malvoyants
- Affiché si l'image ne charge pas
- Aide le référencement Google -->
<!-- Image avec légende -->
<figure>
<img src="équipe.jpg" alt="L'équipe ITSkillsCenter" loading="lazy">
<figcaption>Notre équipe de formateurs à Dakar</figcaption>
</figure>Listes
<!-- Liste non ordonnée (à puces) -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<!-- Liste ordonnée (numérotée) -->
<ol>
<li>Apprendre HTML</li>
<li>Apprendre CSS</li>
<li>Apprendre JavaScript</li>
</ol>
<!-- Liste de définitions -->
<dl>
<dt>HTML</dt>
<dd>Langage de structure des pages web</dd>
<dt>CSS</dt>
<dd>Langage de mise en forme visuelle</dd>
</dl>Tableaux
<table>
<thead>
<tr>
<th>Formation</th>
<th>Durée</th>
<th>Prix</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML/CSS</td>
<td>30h</td>
<td>50 000 FCFA</td>
</tr>
<tr>
<td>JavaScript</td>
<td>40h</td>
<td>75 000 FCFA</td>
</tr>
</tbody>
</table>Balises sémantiques (HTML5)
<!-- Ces balises donnent du SENS à votre contenu (bon pour le SEO) -->
<header>En-tête du site (logo, navigation)</header>
<nav>Menu de navigation</nav>
<main>Contenu principal (1 seul par page)</main>
<section>Section thématique</section>
<article>Contenu autonome (article de blog, produit)</article>
<aside>Contenu secondaire (sidebar, publicités)</aside>
<footer>Pied de page (copyright, liens légaux)</footer>
<!-- Structure type d'une page -->
<body>
<header>
<nav>...</nav>
</header>
<main>
<section>...</section>
<section>...</section>
</main>
<aside>...</aside>
<footer>...</footer>
</body>💡 Pourquoi les balises sémantiques ?
- SEO : Google comprend mieux la structure de votre page
- Accessibilité : les lecteurs d’écran naviguent entre les sections
- Lisibilité : le code est plus clair que des
<div>partout
Formulaires
<form action="traitement.php" method="POST">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" required>
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>
<label for="message">Message :</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Envoyer</button>
</form>
<!-- Types d'input utiles -->
<input type="text"> <!-- Texte -->
<input type="email"> <!-- Email (validé) -->
<input type="password"> <!-- Mot de passe -->
<input type="number"> <!-- Nombre -->
<input type="tel"> <!-- Téléphone -->
<input type="date"> <!-- Date -->
<input type="url"> <!-- URL -->
<input type="file"> <!-- Fichier -->
<input type="checkbox"> <!-- Case à cocher -->
<input type="radio"> <!-- Bouton radio -->Conteneurs génériques
<!-- div : conteneur bloc (prend toute la largeur) -->
<div class="carte">
<h3>Titre</h3>
<p>Contenu</p>
</div>
<!-- span : conteneur en ligne (dans le texte) -->
<p>Le prix est de <span class="prix">15 000 FCFA</span></p>Erreurs fréquentes
Plusieurs <h1> sur la même page
Symptôme : structure de titres confuse, score SEO dégradé.
Cause : habitude héritée des anciens templates.
Solution : un seul <h1> par page (le titre principal). Utilisez <h2> à <h6> pour la hiérarchie interne.
Attribut alt oublié sur les images
Symptôme : images invisibles aux lecteurs d’écran, alertes Google Lighthouse.
Cause : oubli ou copier-coller incomplet.
Solution : toujours fournir un alt descriptif. Pour une image décorative, utilisez alt="" (vide volontairement).
Liens externes sans rel="noopener"
Symptôme : faille de sécurité « tabnabbing » et perte de performance.
Cause : usage de target="_blank" seul.
Solution : ajoutez systématiquement rel="noopener noreferrer" à vos liens externes en nouvel onglet.
Champs <input> sans <label>
Symptôme : formulaire inaccessible, mauvaise UX mobile.
Cause : on s’appuie uniquement sur placeholder.
Solution : chaque input doit être lié à un <label for="id"> (ou enveloppé dedans).
Exercice pratique
🎯 Défi : Page web complète en HTML pur
- Créez une page avec la structure sémantique complète (header, nav, main, footer)
- Ajoutez : un titre h1, 3 sections avec h2, des paragraphes, une image avec figure
- Créez un menu de navigation avec 4 liens
- Ajoutez un tableau avec 3 colonnes et 4 lignes
- Créez un formulaire de contact complet
- Validez votre code sur validator.w3.org
Balises HTML5 sémantiques : structure moderne 2026
HTML5 a introduit en 2014 plusieurs balises sémantiques qui remplacent les <div> génériques par des éléments porteurs de sens. En 2026, leur usage n’est plus optionnel — c’est le standard pour SEO, accessibilité et maintenabilité. Six balises essentielles : <header> pour l’en-tête de page ou de section, <nav> pour les blocs de navigation, <main> pour le contenu principal unique de la page, <article> pour un contenu autonome (article de blog, fiche produit), <section> pour un groupement thématique, <footer> pour le pied de page.
Une bonne hiérarchie sémantique aide Google à comprendre la structure de votre contenu, améliore l’expérience des utilisateurs de lecteurs d’écran (qui peuvent sauter directement au <main> via les raccourcis assistive technology), et facilite l’écriture de CSS et de JavaScript ciblés. Bannir les <div> sans rôle quand une balise sémantique existe — c’est un réflexe de senior dev en 2026.
Microdonnées Schema.org pour le SEO
Au-delà des balises HTML standards, les microdonnées Schema.org enrichissent le HTML avec des informations structurées que Google et Bing exploitent pour les rich results (étoiles produits, FAQ, recettes, événements). Trois formats coexistent : JSON-LD (recommandé en 2026), Microdata (déclinaison HTML inline) et RDFa. JSON-LD se place dans le <head> ou en bas du <body> et ne pollue pas le HTML.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Les balises HTML essentielles",
"author": { "@type": "Person", "name": "ITSkillsCenter" },
"datePublished": "2026-05-05"
}
</script>Pour vérifier que vos microdonnées sont valides, l’outil Google Rich Results Test est gratuit et donne un retour immédiat. Pour une PME e-commerce ouest-africaine, ajouter Schema.org Product avec prix en FCFA, disponibilité et avis clients fait gagner immédiatement de la visibilité dans les résultats Google.
Accessibilité : balises et attributs ARIA
Les balises HTML5 sémantiques apportent déjà une bonne accessibilité de base. Pour les cas avancés, les attributs ARIA (aria-label, aria-describedby, aria-expanded, role) complètent. Règle d’or : préférer une balise HTML native qui couvre le besoin plutôt qu’une div+ARIA. Un <button> est toujours mieux qu’un <div role="button" tabindex="0"> qui doit recoder l’accessibilité clavier.
Quatre cas où ARIA reste indispensable. Premier cas : composants custom sans équivalent HTML (carrousel, accordéon avancé). Deuxième cas : zones live qui annoncent des changements dynamiques aux lecteurs d’écran (aria-live="polite"). Troisième cas : labels invisibles (aria-label sur un bouton icône sans texte). Quatrième cas : relations entre éléments (un message d’erreur lié à son champ via aria-describedby).
Adaptation au contexte ouest-africain
Pour une PME ou un développeur basé à Dakar, Abidjan, Bamako ou Cotonou qui livre des sites WordPress ou applications custom, écrire un HTML sémantique propre dès le départ apporte trois bénéfices concrets. Premier bénéfice : meilleur référencement local sur Google (les balises sémantiques aident Google à parser votre contenu pour les rich results). Deuxième bénéfice : conformité aux exigences d’accessibilité des marchés publics (RGAA en France, équivalents émergents au Sénégal et Côte d’Ivoire). Troisième bénéfice : maintenance facilitée pour les développeurs qui reprennent votre code.
Pour valider la qualité HTML d’une page, l’outil WAVE (gratuit, web.gov ou via extension Chrome) audite à la fois le HTML sémantique et les attributs ARIA en quelques secondes. C’est un excellent point de départ pour un audit rapide. Pour étoffer le tableau sur les pratiques modernes CSS/JS, voir le guide Bootstrap 5 responsive.
Performance HTML : ordre des balises et préchargement
L’ordre des balises dans le <head> impacte directement la performance perçue. Quatre règles à suivre. Première règle : déclarer <meta charset="UTF-8"> et <meta name="viewport"> en tout premier — avant tout CSS, script ou style. Le navigateur a besoin de ces deux infos pour démarrer correctement le rendu. Deuxième règle : précharger les ressources critiques avec <link rel="preload"> pour les polices web et les images du LCP.
Troisième règle : différer les scripts non critiques avec defer ou async. defer attend que le DOM soit parsé avant d’exécuter (ordre garanti) ; async exécute dès que disponible (ordre non garanti). Pour Google Analytics ou tags marketing : async. Pour vos scripts applicatifs qui dépendent du DOM : defer. Quatrième règle : éviter document.write() qui bloque le parsing — pratiquement banni en 2026.
Validation HTML : outils gratuits et standards
Un HTML invalide peut causer des bugs de rendu cross-navigateur, des problèmes d’accessibilité, et pénaliser le SEO. Trois outils de référence à connaître. Premier outil : W3C Markup Validation Service (validator.w3.org) — gratuit, le standard officiel depuis des années. Vérifie syntaxe, balises non fermées, attributs invalides. Deuxième outil : HTML5 Validator intégré dans Chrome DevTools (Lighthouse > Accessibility > HTML). Troisième outil : extensions ESLint avec plugin eslint-plugin-html qui valide le HTML inline dans les fichiers JS/JSX.
Pour les projets sérieux, intégrer la validation HTML dans la pipeline CI évite les régressions. Un fichier HTML cassé n’est jamais bloquant pour le rendu (les navigateurs sont permissifs), mais l’accumulation de petites erreurs finit par produire des bugs de positionnement et d’accessibilité difficiles à diagnostiquer.
Erreurs HTML les plus courantes
| Erreur | Conséquence | Correction |
|---|---|---|
| Balises non fermées | Rendu cassé selon le navigateur | Toujours fermer les balises non-void (<p> exige </p>) |
Attribut alt manquant sur <img> |
Image inaccessible aux lecteurs d’écran | Toujours fournir alt ; alt="" si l’image est purement décorative |
Plusieurs <h1> sur une page |
Mauvais SEO et structure confuse | Un seul <h1> par page, hiérarchie h2/h3 cohérente |
| IDs dupliqués | JavaScript ciblant l’ID retourne le premier seul | Vérifier l’unicité, utiliser des classes pour la duplication |
| Inline styles abondants | Maintenance impossible | Externaliser dans un fichier CSS ; inline réservé au-dessus du fold critique |
HTML moderne en 2026 : Web Components et Custom Elements
Au-delà des balises standards, HTML moderne permet de créer ses propres balises via les Custom Elements de la spécification Web Components. Une balise <mon-bouton> peut encapsuler du HTML, du CSS et du JavaScript sans framework. Les avantages : isolation des styles via Shadow DOM, réutilisabilité framework-agnostique, performance native du navigateur. Les limites : courbe d’apprentissage plus raide que React/Vue, écosystème moins mature.
Pour les équipes qui maintiennent des composants partagés entre plusieurs sites, les Web Components sont une option sérieuse en 2026 — Shoelace, Lit et FAST sont des frameworks légers qui facilitent leur création. Pour les projets simples, du HTML standard avec un peu de CSS et JS reste imbattable en simplicité.
L’écosystème HTML évolue lentement par design, ce qui en fait une compétence à long terme — apprendre les bases solidement aujourd’hui paie sur 10 à 15 ans de carrière.