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
Q1 Quelle est la première ligne d’un document HTML valide ?
Q2 Où place-t-on les métadonnées comme le titre ou l’encodage ?
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>
Besoin d'aide ?
Tuteur Virtuel
Bonjour ! Je suis votre tuteur virtuel. Comment puis-je vous aider avec ce cours aujourd'hui ?
Historique des conversations
Chargement...