Apprends à créer un document HTML correctement structuré avec les éléments DOCTYPE, html, head et body.
Dans la leçon précédente, tu as appris à écrire des éléments HTML individuels. Mais une vraie page web nécessite une structure spécifique pour que les navigateurs puissent l'interpréter correctement.
Chaque document HTML valide suit le même plan. Pense à ça comme construire une maison : avant d'ajouter des meubles (ton contenu), tu as besoin de fondations, de murs et d'un toit (la structure du document).
Les éléments structurels clés sont :
<!DOCTYPE html> — Indique au navigateur qu'il s'agit d'un document HTML5.<html> — L'élément racine qui enveloppe tout.<head> — Contient les métadonnées (informations à propos de la page, pas le contenu visible).<body> — Contient tout le contenu visible de la page.La toute première ligne de tout document HTML doit être la déclaration DOCTYPE :
<!DOCTYPE html>
Ce n'est pas une balise HTML — c'est une instruction pour le navigateur. Elle indique au navigateur de rendre la page en utilisant les standards modernes HTML5. Sans elle, les navigateurs peuvent passer en « mode quirks » et rendre ta page de manière incohérente.
La déclaration DOCTYPE est insensible à la casse, mais par convention elle est écrite en majuscules.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a properly structured HTML document.</p>
</body>
</html>L'élément <head> est l'endroit pour les métadonnées — des données à propos de ton document qui n'apparaissent pas sur la page elle-même. Les éléments courants à l'intérieur de <head> incluent :
<title> — Définit le texte affiché dans l'onglet du navigateur et utilisé par les moteurs de recherche.<meta charset="UTF-8"> — Déclare l'encodage des caractères pour que le navigateur puisse afficher le texte correctement (y compris les caractères accentués, emojis et symboles).<meta name="viewport" ...> — Contrôle comment la page s'adapte sur les appareils mobiles.<link> et <style> — Pour connecter des feuilles de style CSS (tu apprendras cela plus tard).L'élément <body>, en revanche, contient tout ce que l'utilisateur voit réellement : titres, paragraphes, images, liens, et plus encore.
Quel élément contient les métadonnées sur la page qui ne sont pas visibles pour l'utilisateur ?