AfriqueCode
Apprendre · Coder · Grandir
HTML
Cours complet de HTML — AfriqueCode
15 leçons · HTML
Généré le 09/07/2026
AfriqueCode — Plateforme d'apprentissage du code
Table des matières
1. Introduction au HTML 15 min
2. Texte et titres 12 min
3. Liens et images 15 min
4. Listes et tableaux 15 min
5. Les formulaires 20 min
6. HTML sémantique 18 min
7. Audio et vidéo 12 min
8. Métadonnées et SEO 18 min
9. Validation de formulaires 15 min
10. Template HTML5 de base 15 min
11. Accessibilité et ARIA 15 min
12. Attributs data-* 10 min
13. Images responsive et optimisées 12 min
14. Éléments interactifs natifs 12 min
15. Canvas et SVG 15 min
Leçon 1 : Introduction au HTML
Difficulté : Débutant · Durée : 15 minutes
Découvrez ce qu'est le HTML, son rôle, et créez votre toute première page web.
## Qu'est-ce que le HTML ?
Le HTML (HyperText Markup Language) est le langage de balisage qui structure le contenu de
toutes les pages web que vous visitez. C'est le squelette de tout site internet, du plus simple blog
aux applications les plus complexes comme YouTube ou Facebook.
## Comment fonctionne le HTML ?
Le HTML utilise des balises (tags) pour décrire et organiser le contenu. Une balise est un mot-clé
entouré de chevrons, comme <p> pour un paragraphe ou <h1> pour un titre. La plupart des balises
fonctionnent par paires : une balise ouvrante et une balise fermante (avec un slash).
### Anatomie d'une balise
Voici comment se décompose une balise HTML typique :
• La balise ouvrante : <p> marque le début
• Le contenu : le texte ou les éléments à l'intérieur
• La balise fermante : </p> marque la fin
## La structure de base d'une page
Toute page HTML moderne commence par la déclaration <!DOCTYPE html> qui indique au
navigateur qu'il s'agit de HTML5. Ensuite, la page est divisée en deux grandes sections :
• L'en-tête (<head>) : contient les informations invisibles comme le titre de l'onglet, l'encodage des
caractères et les liens vers les fichiers CSS.
• Le corps (<body>) : contient tout le contenu visible par l'utilisateur — textes, images, boutons,
etc.
## Les attributs
Les balises peuvent recevoir des attributs qui ajoutent des informations supplémentaires. Par
exemple, lang="fr" indique que la page est en français, et charset="UTF-8" définit l'encodage.
Ø=Ü¡ Astuce de pro : Prenez l'habitude de toujours bien fermer vos balises et de les imbriquer
correctement. Un code propre et bien structuré est la base d'un bon développement web !
%¸ Exemple de code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon premier site</title>
</head>
<body>
<h1>Bonjour l'Afrique !</h1>
<p>Ceci est mon tout premier site web.</p>
</body>
</html>
AfriqueCode — HTML — Page 4/4
Leçon 2 : Texte et titres
Difficulté : Débutant · Durée : 12 minutes
Structurez votre contenu avec des titres hiérarchisés, des paragraphes et des balises de mise en
forme.
## Les titres et leur hiérarchie
Le HTML propose six niveaux de titres, de <h1> (le plus important) à <h6> (le moins important).
Les titres structurent votre page comme les chapitres et sous-chapitres d'un livre. Ils sont aussi
cruciaux pour le référencement Google (SEO).
### Les règles d'or des titres
• Une seule balise <h1> par page (le titre principal)
• Respectez la hiérarchie : <h1> puis <h2> puis <h3>...
• Ne sautez pas de niveaux (pas de <h4> directement après un <h2>)
• Les titres doivent être descriptifs et concis
## Les paragraphes
La balise <p> crée un paragraphe. Le navigateur ajoute automatiquement un espace (marge) avant
et après chaque paragraphe pour aérer la lecture.
## Mettre en forme le texte
HTML propose plusieurs balises pour mettre en valeur certaines parties de votre texte :
BaliseRôleExemple
<strong>Texte important (gras)Important
<em>Emphase (italique)Emphase
<mark>Texte surlignéSurligné
<u>Texte soulignéSouligné
<small>Texte plus petitPetit
<del>Texte barréBarré
## Les sauts de ligne et séparateurs
La balise <br> force un saut de ligne à l'intérieur d'un paragraphe. La balise <hr> crée une ligne
horizontale de séparation entre deux sections.
& þ Attention : N'utilisez jamais les balises <br> ou <hr> pour créer de l'espacement visuel. C'est le
rôle du CSS. En HTML, on décrit le sens du contenu, pas son apparence.
%¸ Exemple de code
<h1>Titre principal de la page</h1>
<h2>Sous-titre de section</h2>
<h3>Titre d'une sous-partie</h3>
<p>Ceci est un paragraphe de texte normal.
Vous pouvez y mettre du texte <strong>important en gras</strong>,
de l'<em>italique pour souligner</em>, ou même
du <mark>texte surligné</mark>.</p>
<p>On peut forcer un <br> saut de ligne.
La balise <hr> crée une ligne de séparation.</p>
AfriqueCode — HTML — Page 6/6
Leçon 3 : Liens et images
Difficulté : Débutant · Durée : 15 minutes
Connectez vos pages avec des liens hypertexte et affichez des images accessibles.
## Les liens hypertexte
Les liens sont l'essence même du Web — c'est ce qui relie les pages entre elles et permet la
navigation. Sans liens, pas de Web ! La balise <a> (pour anchor, ancre) crée un lien.
### L'attribut href
L'attribut href indique la destination du lien. Il peut pointer vers :
• Un site externe : href="[Link]
• Une page de votre site : href="[Link]"
• Une section dans la page : href="#contact" (ancre)
• Une adresse email : href="[Link]
• Un numéro de téléphone : href="[Link]
### L'attribut target
Pour ouvrir un lien dans un nouvel onglet, ajoutez target="_blank". Par sécurité, ajoutez aussi
rel="noopener noreferrer" pour éviter que la page de destination ne puisse manipuler votre page.
## Les images
La balise <img> affiche une image. C'est une balise auto-fermante (pas de balise de fin). Elle
possède deux attributs indispensables :
• src : le chemin vers le fichier image (URL ou fichier local)
• alt : texte alternatif affiché si l'image ne charge pas, et lu par les lecteurs d'écran pour les
malvoyants
### Les attributs de dimension
Vous pouvez préciser la taille avec width et height. C'est recommandé pour éviter que la page ne
saute pendant le chargement de l'image.
## Figure et figcaption
Pour une image avec une légende, utilisez <figure> qui contient l'image et <figcaption> pour la
description. C'est plus sémantique et accessible.
&• Accessibilité : L'attribut alt n'est pas optionnel ! Il permet aux personnes malvoyantes de
comprendre l'image via leur lecteur d'écran. Si l'image est purement décorative, utilisez alt="".
%¸ Exemple de code
<a href="[Link]
target="_blank"
rel="noopener noreferrer">
Visiter Wikipédia (nouvel onglet)
</a>
<hr>
<img src="[Link]"
alt="Coucher de soleil sur la savane africaine"
width="400">
<figure>
<img src="[Link]" alt="Carte de l'Afrique">
<figcaption>Carte du continent africain</figcaption>
</figure>
AfriqueCode — HTML — Page 8/8
Leçon 4 : Listes et tableaux
Difficulté : Débutant · Durée : 15 minutes
Organisez l'information avec des listes à puces, des listes numérotées et des tableaux de données.
## Les listes à puces (non ordonnées)
La balise <ul> (unordered list) crée une liste d'éléments sans ordre particulier. Chaque élément de
la liste est entouré par la balise <li> (list item).
## Les listes numérotées (ordonnées)
La balise <ol> (ordered list) crée une liste numérotée automatiquement. Le navigateur ajoute les
numéros 1, 2, 3... Vous pouvez changer le type de numérotation avec l'attribut type : "1" (chiffres),
"A" (lettres majuscules), "a" (minuscules), "I" (chiffres romains).
### L'attribut start
Pour commencer une liste numérotée à un autre chiffre que 1, utilisez start="5" par exemple.
## Les listes imbriquées
Vous pouvez imbriquer une liste dans une autre pour créer des sous-niveaux. Placez simplement
une nouvelle balise <ul> ou <ol> à l'intérieur d'un <li>.
## Les tableaux
Pour afficher des données tabulaires (des données organisées en lignes et colonnes), HTML
propose plusieurs balises :
BaliseRôle
<table>Le conteneur du tableau
<tr>Une ligne (table row)
<th>Une cellule d'en-tête (table header)
<td>Une cellule de données (table data)
<thead>Section d'en-tête du tableau
<tbody>Section du corps du tableau
<tfoot>Section de pied du tableau
### Fusionner des cellules
Pour fusionner des cellules, utilisez les attributs colspan (fusionner plusieurs colonnes) et rowspan
(fusionner plusieurs lignes).
Ø=Ü¡ Bon à savoir : Les tableaux HTML sont faits pour afficher des données, pas pour créer des
mises en page. Pour la mise en page, utilisez CSS (Flexbox ou Grid) !
%¸ Exemple de code
<h2>Liste de courses</h2>
<ul>
<li>Riz</li>
<li>Poulet</li>
<li>Manioc</li>
</ul>
<h2>Étapes de la recette</h2>
<ol>
<li>Faire chauffer l'huile</li>
<li>Ajouter les oignons</li>
<li>Faire dorer le poulet</li>
</ol>
<table>
<thead>
<tr>
<th>Pays</th>
<th>Capitale</th>
<th>Population</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sénégal</td>
<td>Dakar</td>
<td>17M</td>
</tr>
<tr>
<td>Cameroun</td>
<td>Yaoundé</td>
<td>27M</td>
</tr>
</tbody>
</table>
AfriqueCode — HTML — Page 11/11
Leçon 5 : Les formulaires
Difficulté : Intermédiaire · Durée : 20 minutes
Collectez des informations de vos utilisateurs avec des champs de saisie, listes déroulantes et
boutons.
## À quoi servent les formulaires ?
Les formulaires sont le moyen principal pour l'utilisateur d'envoyer des données à un site web :
inscription, connexion, recherche, commande, contact... Chaque fois que vous tapez quelque
chose et cliquez sur un bouton, c'est un formulaire HTML qui est derrière.
## La balise form
La balise <form> regroupe tous les champs. Elle possède deux attributs essentiels :
• action : l'URL de la page qui va traiter les données
• method : la méthode HTTP, généralement GET (données dans l'URL) ou POST (données
cachées, plus sécurisé)
## Les champs de saisie
La balise <input> est la plus polyvalente. Son attribut type détermine le type de champ :
TypeUtilisation
textTexte court simple
emailEmail (validation automatique)
passwordMot de passe (masqué)
numberNombres (avec min, max, step)
dateSélecteur de date
telNuméro de téléphone
urlAdresse web
colorSélecteur de couleur
fileUpload de fichier
checkboxCase à cocher
radioBouton radio (choix unique)
## Textarea
Pour un texte long sur plusieurs lignes, utilisez <textarea>. Contrairement à <input>, elle a une
balise de fermeture. L'attribut rows définit le nombre de lignes visibles.
## Select et option
Pour une liste déroulante, utilisez <select> avec des balises <option> pour chaque choix.
## Les labels
La balise <label> associe un texte descriptif à un champ. Utilisez l'attribut for qui doit correspondre
à l'id du champ. Cela améliore l'accessibilité et l'expérience utilisateur : cliquer sur le label met le
focus sur le champ.
## Les attributs de validation
• required : champ obligatoire
• placeholder : texte d'aide
• min et max : valeurs limites
• pattern : expression régulière de validation
• minlength et maxlength : longueur du texte
%¸ Exemple de code
<form action="/traitement" method="POST">
<label for="nom">Nom complet :</label>
<input type="text" id="nom" name="nom" required>
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>
<label for="age">Âge :</label>
<input type="number" id="age" name="age" min="0" max="120">
<label for="bio">Votre message :</label>
<textarea id="bio" name="bio" rows="4"></textarea>
<label>
<input type="checkbox" name="newsletter"> S'abonner à la newsletter
</label>
<button type="submit">Envoyer</button>
</form>
AfriqueCode — HTML — Page 14/14
Leçon 6 : HTML sémantique
Difficulté : Intermédiaire · Durée : 18 minutes
Utilisez les bonnes balises pour un code clair, accessible et bien référencé par Google.
## Pourquoi la sémantique est importante ?
Le HTML sémantique signifie utiliser les bonnes balises pour décrire le sens du contenu, plutôt que
d'utiliser des <div> partout. HTML5 a introduit de nombreuses balises sémantiques qui donnent du
sens à la structure de votre page.
### Les avantages de la sémantique
• Accessibilité : les lecteurs d'écran naviguent plus facilement
• Référencement (SEO) : Google comprend mieux votre contenu
• Maintenabilité : le code est plus lisible pour les développeurs
• Style par défaut : certaines balises ont des styles natifs utiles
## Les balises sémantiques de structure
BaliseUsage
<header>En-tête de page ou de section (logo, titre, menu)
<nav>Menu de navigation principal
<main>Contenu principal de la page (unique)
<section>Section thématique regroupant un sujet
<article>Contenu autonome (article de blog, produit)
<aside>Contenu secondaire (barre latérale, pub)
<footer>Pied de page (copyright, liens)
<figure>Contenu illustré (image, graphique, code)
<figcaption>Légende d'une figure
<time>Date ou heure (pour les articles)
## Quand utiliser div vs section vs article ?
• <div> : conteneur générique, sans signification particulière. À utiliser quand aucune autre balise
ne convient.
• <section> : regroupe un thème ou un sujet. Contient généralement un titre.
• <article> : contenu qui aurait du sens seul, hors du contexte de la page (un article de blog, une
fiche produit).
Ø<߯ Règle d'or : Utilisez la balise la plus spécifique possible. Ne recourez aux <div> que lorsque
aucune balise sémantique ne convient.
%¸ Exemple de code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon site sémantique</title>
</head>
<body>
<header>
<nav>
<a href="#">Accueil</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
</header>
<main>
<article>
<h1>Titre de l'article</h1>
<p>Contenu principal...</p>
</article>
<aside>
<h2>Liens utiles</h2>
<p>Contenu secondaire</p>
</aside>
</main>
<footer>
<p>© 2024 Mon Site</p>
</footer>
</body>
</html>
AfriqueCode — HTML — Page 17/17
Leçon 7 : Audio et vidéo
Difficulté : Intermédiaire · Durée : 12 minutes
Intégrez vidéos, sons et sous-titres nativement avec HTML5, sans plugins.
## Le multimédia natif en HTML5
Avant HTML5, afficher une vidéo ou un son nécessitait des plugins comme Flash. Aujourd'hui,
HTML5 intègre nativement la lecture de multimédia, sans aucun plugin. C'est plus rapide, plus
sécurisé et plus accessible.
## La balise audio
La balise <audio> permet de lire un fichier son. Ajoutez l'attribut controls pour afficher les boutons
de lecture (play, pause, volume). Le contenu entre les balises sert de message de secours pour les
anciens navigateurs.
### Attributs de audio
• controls : affiche les contrôles de lecture
• autoplay : démarre automatiquement (souvent bloqué par les navigateurs)
• loop : lit en boucle
• muted : coupe le son par défaut
• preload="auto" : précharge le fichier
## La balise video
La balise <video> fonctionne comme audio, mais pour la vidéo. Elle accepte en plus :
• width et height : dimensions
• poster="[Link]" : image affichée avant la lecture
## Les sous-titres avec track
La balise <track> ajoute des sous-titres, des descriptions audio ou des chapitres. Le format de
fichier est WebVTT (.vtt). C'est essentiel pour l'accessibilité.
## Intégrer des vidéos YouTube
Pour intégrer une vidéo YouTube ou Vimeo, on utilise la balise <iframe> avec le code d'intégration
fourni par la plateforme. C'est plus simple que d'héberger la vidéo soi-même.
& þ Performance : Les fichiers vidéo sont lourds. Si vous hébergez vos propres vidéos, pensez à les
compresser et à proposer plusieurs formats (MP4, WebM) pour la compatibilité.
%¸ Exemple de code
<audio controls>
<source src="musique.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas l'audio.
</audio>
<video controls width="500" poster="[Link]">
<source src="presentation.mp4" type="video/mp4">
<track src="[Link]" kind="subtitles" srclang="fr" label="Français">
Votre navigateur ne supporte pas la vidéo.
</video>
AfriqueCode — HTML — Page 19/19
Leçon 8 : Métadonnées et SEO
Difficulté : Avancé · Durée : 18 minutes
Optimisez votre référencement Google et le partage sur les réseaux sociaux.
## Pourquoi les métadonnées sont cruciales ?
La section <head> de votre page HTML contient des informations invisibles pour l'utilisateur mais
cruciales pour les moteurs de recherche, les réseaux sociaux et la bonne affichage de votre page.
## La balise title
La balise <title> définit le titre affiché dans l'onglet du navigateur. C'est aussi le texte cliquable dans
les résultats Google. Il doit être descriptif et unique pour chaque page (50-60 caractères
recommandés).
## La balise meta description
La <meta name="description"> décrit votre page en une phrase (150-160 caractères). C'est le texte
qui s'affiche sous votre titre dans les résultats de recherche Google. Une bonne description
augmente le taux de clic.
## La balise viewport
La balise <meta name="viewport"> est obligatoire pour le responsive design. Sans elle, votre site
ne s'affichera pas correctement sur mobile et tablette.
## Open Graph (Facebook, WhatsApp, LinkedIn)
Les balises og: contrôlent l'aperçu quand votre page est partagée sur les réseaux sociaux. Elles
définissent le titre, la description et l'image affichés dans le carte de partage.
### Les balises Open Graph essentielles
• og:title : titre du partage
• og:description : description
• og:image : image miniature (1200×630px recommandé)
• og:url : URL canonique
• og:type : type de contenu (article, website)
## Twitter Cards
Les balises twitter: font la même chose pour Twitter/X. La plus importante est twitter:card qui définit
le format d'aperçu.
## Les autres balises meta utiles
• charset : encodage des caractères (toujours UTF-8)
• robots : contrôler l'indexation par Google
• canonical : éviter le contenu dupliqué
• theme-color : couleur de la barre du navigateur sur mobile
%¸ Exemple de code
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apprendre le HTML - Cours gratuit | AfriqueCode</title>
<meta name="description"
content="Apprenez le HTML gratuitement avec des cours interactifs pour
débutants. Créez votre premier site web étape par étape.">
<meta name="keywords" content="html, cours html, apprendre html, html5">
<meta name="author" content="Daniel Biampika">
<!-- Open Graph (Facebook, WhatsApp) -->
<meta property="og:title" content="Apprendre le HTML">
<meta property="og:description" content="Cours HTML gratuit pour débutants">
<meta property="og:image" content="[Link]
<meta property="og:url" content="[Link]
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
</head>
AfriqueCode — HTML — Page 22/22
Leçon 9 : Validation de formulaires
Difficulté : Avancé · Durée : 15 minutes
Validez les données utilisateur côté client avec les attributs HTML5 natifs.
## La validation côté client
HTML5 propose une validation native des formulaires, sans JavaScript. Le navigateur vérifie
automatiquement les champs avant l'envoi et affiche des messages d'erreur. C'est rapide,
accessible et sécurisé.
## Les attributs de validation
AttributRôle
requiredChamp obligatoire
minlengthNombre minimum de caractères
maxlengthNombre maximum de caractères
min / maxValeur minimale / maximale (nombres, dates)
patternExpression régulière à respecter
stepLe pas entre les valeurs (nombres)
## Les types de champs validants
Le type type de l'input déclenche déjà une validation automatique :
• type="email" : vérifie le format email (avec @ et domaine)
• type="url" : vérifie le format d'URL
• type="number" : n'accepte que des chiffres
• type="date" : format de date valide
## L'attribut pattern
L'attribut pattern accepte une expression régulière (regex) pour une validation personnalisée. Par
exemple, un code postal, un numéro de téléphone, un mot de passe fort.
### Exemple de mot de passe fort
Pour exiger 8 caractères minimum, avec au moins une majuscule et un chiffre :
pattern="(?=.*[A-Z])(?=.*[0-9]).{8,}"
## L'attribut title
Utilisez l'attribut title sur un champ avec pattern pour expliquer à l'utilisateur le format attendu. Ce
texte s'affiche dans le message d'erreur.
Ø=Ý Sécurité : La validation HTML est côté client. Elle améliore l'expérience utilisateur mais ne suffit
pas pour la sécurité. Vérifiez toujours les données côté serveur aussi !
%¸ Exemple de code
<!-- Un formulaire avec validation native -->
<form>
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom"
required minlength="2" maxlength="50">
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>
<label for="password">Mot de passe :</label>
<input type="password" id="password" name="password"
required minlength="8"
pattern="(?=.*[A-Z])(?=.*[0-9]).{8,}"
title="8 caractères min, 1 majuscule, 1 chiffre">
<label for="site">Site web :</label>
<input type="url" id="site" name="site"
placeholder="[Link]
<button type="submit">S'inscrire</button>
</form>
AfriqueCode — HTML — Page 24/24
Leçon 10 : Template HTML5 de base
Difficulté : Avancé · Durée : 15 minutes
Le template de référence pour démarrer tout projet web moderne avec les bonnes pratiques.
## Le template HTML5 de référence
Voici le template de base que tout développeur devrait utiliser pour démarrer une nouvelle page
HTML moderne. Il inclut tous les éléments essentiels pour la performance, le SEO et l'accessibilité.
## Les éléments indispensables du head
### 1. L'encodage
<meta charset="UTF-8"> doit être la première balise du head. UTF-8 supporte tous les caractères
(accents, émojis, alphabets non latins).
### 2. Le viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0"> est obligatoire pour le
responsive design. Sans lui, le site est minuscule sur mobile.
### 3. Le titre et la description
Chaque page doit avoir un <title> unique et une meta description pour le SEO.
## Le favicon
Le favicon est la petite icône dans l'onglet du navigateur. Déclarez-le avec :
• <link rel="icon" type="image/svg+xml" href="/[Link]"> pour les navigateurs modernes
• <link rel="apple-touch-icon" href="/[Link]"> pour iOS
## Les polices web (Google Fonts)
Pour utiliser une police personnalisée comme Inter, Roboto ou Poppins :
• <link rel="preconnect"> pour préconnecter au serveur de polices (accélère le chargement)
• <link href="..."> pour charger la police
## Les fichiers CSS et JS
• <link rel="stylesheet" href="[Link]"> pour le CSS
• <script src="[Link]" defer> pour le JavaScript (l'attribut defer est recommandé)
## La structure du body
Utilisez les balises sémantiques : <header>, <nav>, <main>, <footer>. N'oubliez pas le lang="fr"
sur la balise <html> !
Ø=Þ€ Astuce performance : Ajoutez defer à vos scripts pour qu'ils ne bloquent pas le rendu de la
page. Le HTML s'affiche plus vite !
%¸ Exemple de code
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template HTML5 Moderne</title>
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/[Link]">
<link rel="apple-touch-icon" href="/[Link]">
<!-- Polices Google -->
<link rel="preconnect" href="[Link]
<link
href="[Link]
rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="[Link]">
<!-- Open Graph -->
<meta property="og:title" content="Mon Site">
<meta property="og:image" content="/[Link]">
</head>
AfriqueCode — HTML — Page 27/27
Leçon 11 : Accessibilité et ARIA
Difficulté : Avancé · Durée : 15 minutes
Rendez vos pages accessibles à tous les utilisateurs, y compris ceux qui utilisent des lecteurs
d'écran.
## Accessibilité (a11y)
L'accessibilité consiste à rendre vos pages utilisables par tous, y compris les personnes en
situation de handicap. C'est un aspect crucial du HTML moderne.
## Les attributs ARIA
Les attributs aria-* (Accessible Rich Internet Applications) fournissent des informations
supplémentaires aux lecteurs d'écran quand le HTML ne suffit pas.
## Bonnes pratiques
• Utilisez des balises sémantiques (nav, main, article) • Ajoutez toujours l'attribut alt aux images •
Associez les label aux champs de formulaire • Assurez-vous que l'ordre de tabulation au clavier
est logique • Utilisez des contrastes de couleurs suffisants
%¸ Exemple de code
<div class="carte-produit">
<img src="[Link]" alt="...">
<h3>Nom du produit</h3>
<p class="prix">15 000 FCFA</p>
<button>Ajouter au panier</button>
</div>
AfriqueCode — HTML — Page 28/28
Leçon 12 : Attributs data-*
Difficulté : Intermédiaire · Durée : 10 minutes
Stockez des données personnalisées dans vos éléments HTML.
## Les attributs de données
Les attributs data-* permettent de stocker des informations personnalisées directement dans le
HTML, accessibles ensuite via JavaScript.
## Syntaxe
Le nom doit commencer par data- suivi d'un nom descriptif. La valeur est toujours une chaîne de
caractères.
## Utilisation avec JavaScript
On accède aux données via [Link] en JavaScript. Très utile pour passer des
paramètres sans attributs personnalisés.
Les data attributes sont parfaits pour lier des éléments HTML à des comportements JavaScript.
%¸ Exemple de code
<div role="alert" aria-live="polite">
Message sauvegardé avec succès !
</div>
<button aria-label="Fermer la fenêtre" aria-expanded="false">
×
</button>
AfriqueCode — HTML — Page 29/29
Leçon 13 : Images responsive et optimisées
Difficulté : Intermédiaire · Durée : 12 minutes
Optimisez vos images pour tous les écrans avec picture et srcset.
## Images responsive
Avec la balise <picture>, vous pouvez servir différentes images selon la taille de l'écran. Cela
améliore considérablement les performances sur mobile.
## L'attribut srcset
srcset permet de proposer plusieurs résolutions d'une même image. Le navigateur choisit la plus
adaptée.
## Lazy loading
L'attribut loading="lazy" diffère le chargement des images hors écran jusqu'à ce que l'utilisateur
scrolle vers elles. Un gain de performance énorme !
%¸ Exemple de code
<picture>
<source media="(max-width: 768px)" srcset="[Link]">
<source media="(max-width: 1200px)" srcset="[Link]">
<img src="[Link]" alt="Photo responsive">
</picture>
AfriqueCode — HTML — Page 30/30
Leçon 14 : Éléments interactifs natifs
Difficulté : Intermédiaire · Durée : 12 minutes
Accordéons, barres de progression et modales sans JavaScript.
## Éléments interactifs natifs
HTML5 propose des éléments interactifs sans JavaScript !
## details et summary
La balise <details> crée un bloc dépliable. <summary> définit le titre cliquable.
## progress et meter
Affichez des barres de progression (<progress>) et des jauges (<meter>) nativement.
## dialog
La balise <dialog> crée des fenêtres modales natives, sans bibliothèque externe.
%¸ Exemple de code
<details>
<summary>Qu'est-ce que le HTML ?</summary>
<p>Le HTML est le langage de balisage utilisé pour créer des pages web.</p>
</details>
<dialog open>
<p>Ceci est une fenêtre modale native !</p>
<button>Fermer</button>
</dialog>
AfriqueCode — HTML — Page 31/31
Leçon 15 : Canvas et SVG
Difficulté : Avancé · Durée : 15 minutes
Dessinez des graphiques et des animations dans le navigateur.
## La balise canvas
Le <canvas> est une zone de dessin pilotée par JavaScript. On peut y dessiner des formes, des
graphiques, des jeux...
## Le contexte de rendu
On obtient le contexte 2D avec getContext('2d'). C'est l'objet qui fournit toutes les méthodes de
dessin.
## Dessiner des formes
• fillRect() : rectangle plein • strokeRect() : rectangle vide • arc() : cercles et arcs • fillText() : du
texte
%¸ Exemple de code
<canvas id="dessin" width="400" height="200"></canvas>
<script>
const canvas = [Link]('dessin');
const ctx = [Link]('2d');
[Link] = '#c1440e';
[Link](50, 50, 100, 80);
</script>
AfriqueCode — HTML — Page 32/32
Félicitations !
Vous avez complété le guide du cours
HTML
"Ubuntu — Je suis parce que nous sommes"
Continuez votre apprentissage sur AfriqueCode
WhatsApp : +242 06945 7200 · biampikadaniel@[Link]