Module 1Les bases du HTML
Chapitre 2 sur 13
La structure d'une page HTML
Éléments, balises, attributs, imbrication, structure minimale d'une page et validation.
- ≈ 150 min
- 6 leçons
- 7 vidéos
- 3 exercices
Module 1Les bases du HTML
Chapitre 2 sur 13
Éléments, balises, attributs, imbrication, structure minimale d'une page et validation.
Objectifs
Avec ce chapitre, tu sauras…
<head> et ce qui va dans le <body> ;Au chapitre 1, VS Code a généré le squelette de ta page avec ! + Tab. Dans ce chapitre, tu vas comprendre chaque caractère de ce squelette, au point de pouvoir l'écrire sans aide. C'est la question la plus fréquente en évaluation : « écris la structure minimale d'une page HTML5 ».
Leçon 1
<a href="https://developer.mozilla.org" title="Documentation">Lire la doc MDN</a>Tableau: Les morceaux de cet élément
| Morceau | Ici | Rôle |
|---|---|---|
| balise ouvrante | <a ...> | début de l'élément, avec son nom (a = anchor, un lien) |
| attribut | href | une information sur l'élément : ici, la destination du lien |
| valeur | "https://developer.mozilla.org" | toujours entre guillemets |
| deuxième attribut | title="Documentation" | séparé du premier par un espace |
| contenu | Lire la doc MDN | ce qui est affiché à l'écran |
| balise fermante | </a> | fin de l'élément : même nom, précédé de / |
| Attribut | Rôle | Exemple |
|---|---|---|
id | identifiant unique dans la page | <section id="contact"> |
class | une ou plusieurs classes, pour le CSS | <p class="intro important"> |
title | info-bulle au survol | <abbr title="World Wide Web">WWW</abbr> |
lang | langue du contenu | <p lang="en">Hello</p> |
hidden |
Vidéo · À regarder
FRApprendre le HTML - Tutoriel Pour Débutant (2h)
MaxCode · YouTube
Vidéo · À regarder
FRApprendre le HTML - Tutoriel Pour Débutant (2h)
MaxCode · YouTube
Leçon 2
| Élément | Rôle | Exemple |
|---|---|---|
<br> | retour à la ligne | Ligne 1<br>Ligne 2 |
<hr> | séparation thématique (trait) | <hr> |
<img> | image | <img src="chat.jpg" alt="Un chat roux"> |
<input> | champ de formulaire |
Leçon 3
Leçon 4
| Ligne | Rôle | Si tu l'oublies… |
|---|---|---|
<!DOCTYPE html> | dit au navigateur : « ceci est du HTML5 moderne » | le navigateur passe en mode quirks (compatibilité années 90), ton CSS se comporte bizarrement |
<html lang="fr"> | l'élément racine, qui contient tout ; lang donne la langue | les lecteurs d'écran lisent ton texte avec un accent anglais, le SEO est moins bon |
<head> | les informations sur la page, invisibles | — |
Leçon 5
Dans le <head> (invisible) | Dans le <body> (visible) |
|---|---|
<title> : titre de l'onglet | titres <h1> à <h6> |
<meta> : encodage, description, viewport | paragraphes, listes, liens |
<link> : feuille de style CSS, favicon | images, vidéos, audio |
<style> : CSS interne | tableaux, formulaires |
<script> : JavaScript | sections, en-tête, pied de page |
Leçon 6
Vidéo · À regarder
FR[TUTO] Les BASES du HTML
Bertrand . Tech · YouTube
Vidéo · À regarder
FR[TUTO] Les BASES du HTML
Bertrand . Tech · YouTube
1Dans <img src="a.jpg" alt="Logo">, alt est…
2Quelle balise n'a pas de balise fermante ?
3Quelle ligne doit être la toute première du fichier ?
4Le <title> se place dans…
5Sans <meta charset="UTF-8">, on risque…
6Un id peut apparaître combien de fois dans une page ?
L'essentiel du chapitre
nom="valeur" vont dans la balise ouvrante.br, hr, img, input, meta, link) n'ont pas de balise fermante.<!DOCTYPE html>, <html lang="fr">, <head> (charset, viewport, title), <body>.<!-- -->, et valide sur validator.w3.org.<div hidden>...</div> |
<input type="email" name="mail"> |
<meta> | métadonnée de la page | <meta charset="UTF-8"> |
<link> | lien vers une ressource (CSS, icône) | <link rel="stylesheet" href="style.css"> |
<meta charset="UTF-8">| l'encodage des caractères |
les accents s'affichent mal : é au lieu de é |
<meta name="viewport" ...> | adapte la page à la largeur du téléphone | sur mobile, la page s'affiche en tout petit, comme sur un écran d'ordinateur |
<title> | le titre de l'onglet et du résultat Google | l'onglet affiche le nom du fichier ; obligatoire pour être valide |
<body> | tout le contenu visible | rien ne s'affiche correctement |
Vidéo · À regarder
FRApprendre le HTML - Tutoriel Pour Débutant (2h)
MaxCode · YouTube
Vidéo · À regarder
FRApprendre le HTML - Tutoriel Pour Débutant (2h)
MaxCode · YouTube
Vidéo · À regarder
FR[TUTO] Les BASES du HTML
Bertrand . Tech · YouTube
| Message (anglais) | Signification | Correction |
|---|---|---|
Element title must not be empty / missing title | il manque le <title> | ajoute <title>...</title> dans le head |
End tag p seen, but there were open elements | une balise n'est pas fermée | ferme les balises dans l'ordre |
An img element must have an alt attribute | image sans texte alternatif | ajoute alt="..." (chapitre 6) |
Duplicate ID | deux éléments ont le même id | un id doit être unique |
Stray end tag div | une balise fermante en trop | supprime-la |
| Français | Anglais | Définition |
|---|---|---|
| élément | element | un morceau de page qui a un sens |
| balise | tag | <nom> ou </nom>, qui délimite un élément |
| attribut | attribute | information ajoutée dans la balise ouvrante |
| élément vide | void element | élément sans contenu ni balise fermante |
| imbrication | nesting | le fait de placer un élément dans un autre |
| DOM | Document Object Model | l'arbre construit par le navigateur à partir du HTML |
| encodage | character encoding | façon de stocker les caractères (UTF-8) |
nom="valeur", sans espace autour du = ;required, disabled, checked).Tableau: Quelques attributs universels (utilisables sur presque toutes les balises)
Les balises HTML. Pendant le segment, associe chaque mot de vocabulaire du tableau ci-dessus à un exemple de la vidéo.
Trois minutes sur les attributs de balises.
Certains éléments n'ont pas de contenu, donc pas de balise fermante. On les appelle éléments vides (void elements).
Tableau: Les éléments vides à connaître
Un élément peut en contenir d'autres : on dit qu'il est leur parent, et qu'ils sont ses enfants. Deux éléments qui ont le même parent sont frères.
Le dernier élément ouvert est le premier fermé. Les balises ne doivent jamais se chevaucher, comme des parenthèses en maths : ( [ ] ) est correct, ( [ ) ] ne l'est pas.
<p>Ce cours est <strong>vraiment <em>utile</em></strong>.</p><p>Ce cours est <strong>vraiment <em>utile</strong></em>.</p>L'arbre d'une page
Le navigateur transforme ton HTML en un arbre appelé DOM (Document Object Model). C'est cet arbre que tu vois dans l'onglet Elements des DevTools, et que JavaScript manipulera plus tard.
html
├── head
│ ├── meta (charset)
│ ├── meta (viewport)
│ └── title
│ └── "Ma première page"
└── body
├── h1
│ └── "Bonjour le web !"
└── p
└── "Je m'appelle Anas et voici..."Chaque élément est une boîte. Tu peux mettre une petite boîte dans une grande, mais tu ne peux pas fermer la grande boîte en laissant la petite à moitié dehors. L'indentation (le décalage vers la droite) rend ces boîtes visibles dans ton code.
Si tu fais une erreur d'imbrication, le navigateur n'affiche aucun message d'erreur : il devine et répare. Ta page « marche » chez toi, puis s'affiche différemment sur un autre navigateur, ou casse ton CSS. C'est pour cela qu'on valide son code (section 6).
Voici la structure à connaître par cœur. Chaque ligne a une raison d'être.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titre de la page</title>
</head>
<body>
<!-- Le contenu visible de la page -->
</body>
</html>Tableau: Ligne par ligne
Tableau: Ce qui va où
L'indentation
Indenter, c'est décaler vers la droite le contenu d'un élément (2 ou 4 espaces par niveau). Le navigateur s'en moque complètement, mais toi et tes collègues, non : un code indenté se lit et se corrige dix fois plus vite.
<ul><li>HTML</li><li>CSS<ul><li>Flexbox</li><li>Grid</li></ul></li></ul><ul>
<li>HTML</li>
<li>CSS
<ul>
<li>Flexbox</li>
<li>Grid</li>
</ul>
</li>
</ul>Les commentaires
<!-- Ceci est un commentaire : il n'est pas affiché dans la page -->
<!-- ===== EN-TÊTE ===== -->
<h1>Mon portfolio</h1>Un commentaire n'est pas affiché, mais il est visible par tout le monde avec Ctrl + U. N'y mets jamais un mot de passe, une clé d'API ou une remarque désobligeante sur un client.
Pourquoi et comment indenter son code, en moins de deux minutes.
Dessine l'arbre DOM du code suivant, puis réponds : quel est le parent de <em> ? Quels sont les enfants de <body> ? <h1> et <p> sont-ils frères ?
<body>
<h1>Menu</h1>
<p>Plat du jour : <em>tajine</em> aux pruneaux.</p>
</body>Ce code contient cinq erreurs. Trouve-les et réécris le code corrigé.
<html>
<head>
<h1>Mon blog</h1>
<meta charset=UTF-8>
</head>
<body>
<p>Bienvenue sur <strong>mon blog</p></strong>
<img src="photo.jpg"></img>
</body>
</html>Sans regarder le cours ni utiliser Emmet, écris la structure minimale d'une page HTML5 en français, dont l'onglet affiche « Recettes de Fès ». Le body contient un titre principal et un paragraphe. Fais-la valider par le W3C.
La structure d'une page HTML. C'est le segment le plus important du chapitre : regarde-le en entier, puis compare avec le tableau « ligne par ligne ».
Une page HTML créée de zéro. Tape le code en même temps que la vidéo : c'est la meilleure préparation à l'exercice 2.3.
Une autre présentation de la structure d'une page web, plus rapide. Utile pour réviser.
Tu approfondiras le <head> au chapitre 11 (SEO, réseaux sociaux, accessibilité).
Les commentaires HTML : la syntaxe <!-- --> en une minute.
Valider son code
Tableau: Les erreurs les plus fréquentes du validateur
Tableau: Le vocabulaire du chapitre