Structure d’un document : DOCTYPE, html, head, body
Écrivez un document HTML5 valide à partir de zéro : la déclaration DOCTYPE, la racine html, head pour les métadonnées et body pour le contenu.
Structure d’un document : DOCTYPE, html, head, body est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Tous les documents HTML ont la même structure de base
Un document HTML5 valide commence toujours par une déclaration DOCTYPE, contient un élément racine html et, à l’intérieur, une section head pour les métadonnées ainsi qu’une section body pour le contenu visible. Comprendre cette structure est la première étape.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>La déclaration DOCTYPE
<!DOCTYPE html> n’est pas une balise HTML : c’est une instruction destinée au navigateur pour afficher la page en mode standard. Sans elle, les navigateurs reviennent au « mode de compatibilité », qui affiche les pages de manière incohérente. Placez-la toujours à la ligne 1.
L’élément <html> et l’attribut lang
L’élément <html> est la racine du document. Ajoutez un attribut lang pour déclarer la langue de la page. Les lecteurs d’écran l’utilisent pour choisir le moteur de prononciation approprié, et les moteurs de recherche s’en servent pour afficher des résultats localisés.
<html lang="en">
<!-- or -->
<html lang="fr">
<html lang="de">L’élément <head>
L’élément <head> contient les métadonnées, c’est-à-dire des informations sur la page plutôt que son contenu lui-même. Rien de ce qui se trouve dans head n’est directement visible par les utilisateurs, mais cela influence la manière dont le navigateur et les moteurs de recherche traitent la page.
Balises meta charset et viewport
<meta charset="UTF-8"> indique au navigateur de décoder le fichier en UTF-8, ce qui prend en charge tous les caractères internationaux. <meta name="viewport"> permet à la conception adaptative de fonctionner sur mobile.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">L’élément <title>
Le texte de <title> apparaît dans l’onglet du navigateur, les favoris et les résultats des moteurs de recherche. Gardez-le concis (50 à 60 caractères), descriptif, et ajoutez le nom de la marque à la fin.
<title>Getting Started with HTML | CoddyKit</title>Associer CSS et polices
Associez les feuilles de style externes avec <link> dans head. Utilisez rel="stylesheet" et la valeur href correcte. Google Fonts et les autres services de polices s’associent également de cette manière.
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">L’élément <body>
Tout ce qui est visible sur la page se trouve dans <body> : titres, paragraphes, images, boutons, formulaires et scripts. Le body correspond à ce que l’utilisateur voit et avec quoi il interagit.
Balises de script : où les placer
Placez <script src="app.js" defer></script> dans <head>. L’attribut defer télécharge le script en parallèle et l’exécute une fois l’analyse du HTML terminée, ce qui constitue le choix par défaut le plus sûr.
<head>
<script src="app.js" defer></script>
</head>Les commentaires en HTML
Utilisez <!-- comment --> pour ajouter des notes à votre HTML. Les commentaires ne sont pas affichés aux utilisateurs, mais sont visibles dans la vue du code source. Utilisez-les pour expliquer une intention, repérer des sections ou désactiver temporairement du code pendant le débogage.
<!-- Navigation section -->
<nav>
...
</nav>
<!-- End navigation -->Validation : le validateur W3C
Collez votre HTML dans validator.w3.org pour vérifier qu’il ne contient pas d’erreurs. Un HTML valide réduit les incohérences entre navigateurs, aide les lecteurs d’écran à analyser correctement la page et témoigne d’un travail professionnel.
Vérification rapide
Où faut-il placer la balise <meta charset="UTF-8"> ?
Récapitulatif : la structure d’un document HTML
Tout fichier HTML doit contenir : → →
(charset, viewport, title, liens CSS) → (tout le contenu visible). Cette structure garantit la cohérence entre navigateurs, l’accessibilité et une indexation correcte par les moteurs de recherche.Questions Fréquemment Posées
La leçon « Structure d’un document : DOCTYPE, html, head, body » est-elle gratuite ?
Oui — le texte complet de « Structure d’un document : DOCTYPE, html, head, body » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Structure d’un document : DOCTYPE, html, head, body » ?
Écrivez un document HTML5 valide à partir de zéro : la déclaration DOCTYPE, la racine html, head pour les métadonnées et body pour le contenu. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Structure d’un document : DOCTYPE, html, head, body » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Structure d’un document : DOCTYPE, html, head, body
- Balises sémantiques : header, nav, main, article, footer
- Texte, images, liens et listes
- Formulaires : input, label, button