Chapitre 2 : Structure de base d’un document HTML
Écouter la leçon
Lecture audio assistée par IA
Chapitre 2 : Structure de base d’un document HTML
Structure générale
Un document HTML suit une structure standard composée de plusieurs parties importantes :
- <!DOCTYPE html> : Indique au navigateur qu’il s’agit d’un document HTML5.
- <html> : La balise racine de tout document HTML.
- <head> : Contient les métadonnées, le titre, les liens vers les fichiers CSS/JS, etc.
- <body> : Contient tout ce qui sera visible à l’écran.
Exemple de structure HTML minimale
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
</head>
<body>
<h1>Titre principal</h1>
<p>Contenu de la page</p>
</body>
</html>
Détails supplémentaires
<meta charset="UTF-8"> permet de prendre en charge les caractères accentués.
- Le contenu entre
<title> apparaît dans l’onglet du navigateur.
Évaluation des acquis
Quiz du chapitre 2
Correction immédiate
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — Doctype
Atelier #1
Quelle est la première ligne obligatoire d'un document HTML5 ?
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<!DOCTYPE html>
#2 — Racine
Atelier #2
Quelle balise englobe tout le contenu de la page ?
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<html>
<!-- Contenu -->
</html>
#3 — Head vs Body
Atelier #3
Dans quelle section place-t-on le titre de la page visible dans l'onglet du navigateur ?
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<head>
<title>Titre de la page</title>
</head>
#4 — Encodage
Atelier #4
Quelle balise meta permet de gérer les accents (UTF-8) ?
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<meta charset="UTF-8">
#5 — Squelette complet
Atelier #5
Écris la structure minimale complète d'une page HTML5.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma page</title>
</head>
<body>
<h1>Bonjour !</h1>
</body>
</html>