Module 2Structurer et enrichir une page
Chapitre 11 sur 13
Le head, le SEO et l'accessibilité
Un head professionnel, le référencement, Open Graph, l'accessibilité et Lighthouse.
- ≈ 150 min
- 6 leçons
- 4 vidéos
- 3 exercices
Module 2Structurer et enrichir une page
Chapitre 11 sur 13
Un head professionnel, le référencement, Open Graph, l'accessibilité et Lighthouse.
Objectifs
Avec ce chapitre, tu sauras…
<head> complet et professionnel ;Ta page fonctionne. Mais est-elle trouvable sur Google ? Partageable proprement sur WhatsApp ou LinkedIn ? Utilisable par une personne aveugle ou qui navigue au clavier ? Ce chapitre fait passer ta page du statut d'exercice à celui de page professionnelle.
Leçon 1
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formation HTML et CSS à Casablanca — CodeLab</title>
<meta name="description" content="Apprends le HTML et le CSS en 8 semaines à Casablanca : cours en petits groupes, projets réels et accompagnement vers l'emploi.">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="css/style.css">
<meta property="og:title" content="Formation HTML et CSS à Casablanca">
<meta property="og:description" content="8 semaines pour apprendre à créer des sites web.">
<meta property="og:image" content="https://codelab.ma/images/partage.jpg">
<meta property="og:url" content="https://codelab.ma/formation-html-css">
<script src="js/script.js" defer></script>
</head>Tableau: Ligne par ligne
| Élément | Rôle |
|---|---|
<meta charset> | encodage UTF-8 : en premier, avant tout texte |
<meta name="viewport"> | affichage correct sur mobile (indispensable au responsive) |
<title> | titre de l'onglet et titre bleu dans Google |
<meta name="description"> | texte gris sous le titre dans les résultats Google |
<link rel="icon"> | la favicon : la petite icône de l'onglet |
<link rel="stylesheet"> | la feuille de style CSS |
<meta property="og:..."> | l'aperçu lors d'un partage sur les réseaux sociaux |
<script defer> | le JavaScript, exécuté après la lecture du HTML |
Vidéo · À regarder
ENHTML Full Course for Beginners | Complete All-in-One Tutorial | 4 Hours
Dave Gray · YouTube
Vidéo · À regarder
FR[TUTO] Les BASES du HTML
Bertrand . Tech · YouTube
Leçon 2
| Méthode | Code | Usage |
|---|---|---|
| fichier externe (recommandé) | <link rel="stylesheet" href="css/style.css"> dans le head | tout le site partage le même fichier |
bloc <style> | <style> h1 { color: navy; } </style> dans le head | une page isolée, un test |
attribut style | <p style="color: red"> | à éviter : mélange structure et apparence |
Leçon 3
| Levier | Bonne pratique |
|---|---|
<title> | unique pour chaque page, 50 à 60 caractères, mot-clé principal au début |
<meta name="description"> | unique, 140 à 160 caractères, donne envie de cliquer |
| titres | un seul <h1> qui contient le sujet, une hiérarchie <h2>/<h3> logique |
| sémantique |
Leçon 4
| Balise | Contenu |
|---|---|
og:title | le titre affiché dans la carte |
og:description | la description |
og:image | l'image (URL absolue, idéalement 1200 × 630 pixels) |
og:url | l'adresse canonique de la page |
og:type | website, article… |
Leçon 5
| Règle | Chapitre |
|---|---|
<html lang="fr"> sur chaque page | 2 |
une hiérarchie de titres logique, un seul <h1> | 3 |
un alt sur chaque image (vide si décorative) | 6 |
| des textes de liens explicites (jamais « cliquez ici ») | 5 |
les balises sémantiques : header, nav, main, footer |
Leçon 6
1Quelle balise fournit le texte gris sous le titre dans Google ?
2Quelle est la méthode moderne pour charger un script dans le head ?
3Les balises Open Graph servent à…
4Que signifie « a11y » ?
5Pour un bouton qui n'affiche qu'une croix « × », on ajoute…
6Quel outil de Chrome donne une note de SEO et d'accessibilité ?
L'essentiel du chapitre
charset, viewport, title unique, meta description, favicon, <link rel="stylesheet">, Open Graph, <script defer>.<link> ; éviter l'attribut style.<h1>, sémantique, alt, liens explicites, page rapide.lang, titres, alt, labels, sémantique, sous-titres, navigation au clavier.| Écriture | Comportement |
|---|
<script src="x.js"></script> dans le head | bloque l'affichage pendant le téléchargement : à éviter |
<script src="x.js"></script> juste avant </body> | ancienne méthode correcte |
<script src="x.js" defer></script> dans le head | méthode moderne : téléchargé en parallèle, exécuté une fois le HTML lu |
Vidéo · À regarder
FRHTML en 1 HEURE - Formation HTML complète en 2025
Melvynx · YouTube
Vidéo · À regarder
FRHTML en 1 HEURE - Formation HTML complète en 2025
Melvynx · YouTube
<main>, <article>, <nav> : Google repère le contenu principal| images | alt descriptif, fichiers légers, noms de fichiers parlants (tajine-safi.webp) |
| liens | textes de liens explicites ; liens internes entre tes pages |
| URL | courtes et lisibles : /formations/html-css, pas /page.php?id=37 |
| langue | <html lang="fr"> |
| performance | images optimisées, loading="lazy", defer : une page rapide est mieux classée |
| 8 |
<caption> et scope dans les tableaux de données | 9 |
un <label> relié à chaque champ, fieldset + legend pour les groupes | 10 |
des sous-titres sur les vidéos (<track>) | 6 |
un title sur chaque <iframe> | 6 |
des <button> pour les actions, des <a> pour la navigation | 5 et 10 |
| Attribut | Rôle | Exemple |
|---|---|---|
aria-label | donne un nom à un élément sans texte visible | <button aria-label="Fermer">×</button> |
aria-hidden="true" | cache un élément décoratif aux lecteurs d'écran | une icône à côté d'un texte |
aria-current="page" | indique le lien de la page en cours | dans un menu |
aria-expanded | menu ouvert ou fermé | géré par JavaScript |
role | donne un rôle à un élément | role="alert" pour un message d'erreur |
Le chapitre « Head Element » de Dave Gray (anglais) : le contenu du <head> élément par élément. Compare avec le tableau ci-dessus.
Trente secondes sur la balise meta description : l'essentiel à retenir en un coup d'œil.
Tableau: Trois façons d'ajouter du CSS
Tableau: Où placer le script ?
Le SEO (Search Engine Optimization, référencement naturel) regroupe les techniques qui aident une page à apparaître en bonne position dans les résultats des moteurs de recherche, sans payer de publicité. Une grande partie du SEO se joue dans le HTML.
Tableau: Les leviers SEO du HTML
Quand tu colles un lien dans WhatsApp, LinkedIn ou Facebook, une carte d'aperçu s'affiche avec une image, un titre et une description. Ces informations viennent des balises Open Graph.
Tableau: Les balises Open Graph essentielles
L'accessibilité (souvent abrégée a11y : « a », 11 lettres, « y ») consiste à rendre un site utilisable par tout le monde, y compris les personnes en situation de handicap : visuel (aveugles, malvoyants, daltoniens), moteur (navigation au clavier uniquement), auditif, cognitif. La référence internationale est le WCAG (Web Content Accessibility Guidelines) du W3C.
Tableau: La check-list d'accessibilité du HTML
F12).Les agences web livrent souvent leurs sites avec un rapport Lighthouse. Pour les sites publics, de nombreux pays imposent un niveau d'accessibilité (en Europe, la norme EN 301 549, basée sur le WCAG). Savoir lancer et lire un audit est une compétence que tu peux mettre sur ton CV.
Lance un audit Lighthouse (mode mobile) sur la page d'accueil de l'exercice 8.4. Note les quatre scores, corrige au moins trois problèmes signalés, relance l'audit et note les nouveaux scores.
Écris le <head> complet de la page produit « Babouches en cuir — taille 42 » d'une boutique en ligne fictive : encodage, viewport, titre optimisé, description de 140 à 160 caractères, favicon, feuille de style, quatre balises Open Graph, et un script chargé avec defer.
Trouve au moins six problèmes d'accessibilité et corrige-les.
<html>
<body>
<div class="menu"><a href="/">Accueil</a> <a href="/blog">Blog</a></div>
<h3>Bienvenue</h3>
<img src="equipe.jpg">
<p>Pour notre brochure, cliquez <a href="brochure.pdf">ici</a>.</p>
<input type="email" placeholder="Votre e-mail">
<div onclick="envoyer()">Envoyer</div>
</body>
</html>L'ajout de styles CSS à une page HTML. C'est un avant-goût de la formation CSS : regarde comment le HTML et le CSS se relient.
La création d'un fichier CSS séparé, relié par <link> : la bonne pratique professionnelle.
ARIA : à utiliser avec modération
ARIA (Accessible Rich Internet Applications) est un ensemble d'attributs qui donnent des informations supplémentaires aux lecteurs d'écran.