Structure de base

Balises essentielles : doctype, html, head, body...

Imagine : tu veux construire une maison. Avant de poser les murs ou choisir la peinture, tu dois avoir un plan solide.

En HTML, ce plan commence toujours par les fondations : <!DOCTYPE>, <html>, <head> et <body>.

C’est ce squelette qui permet à ton navigateur de comprendre comment organiser la page.

1.1<!DOCTYPE html>

C’est la première ligne de ton fichier. Elle dit au navigateur : “On construit avec les règles HTML5”. Si tu l’oublies, certains navigateurs risquent d’afficher ton site n’importe comment.

<!DOCTYPE html>

1.2<html>, <head>, <body>

<html> : c’est l’enveloppe de ta page, comme les murs de ta maison.
<head> : c’est la fiche technique, on y met les infos invisibles (titre, encodage, styles).
<body> : c’est l’intérieur, là où tu places ton contenu visible (textes, images, boutons…).

<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Plan de la maison</title>
  </head>
  <body>
    <p>Bienvenue dans la pièce principale !</p>
  </body>
</html>

Schéma interactif : la structure de base

<html lang="fr">Racine

<head>Fiche technique (invisible)

<body>Contenu visible

</html>

html

<html> (la racine)

C'est l'enveloppe globale de ta page. Elle indique au navigateur que tout ce qui se trouve à l'intérieur est du code HTML. Son attribut lang="fr" est crucial pour indiquer la langue de la page aux moteurs de recherche et aux outils d'accessibilité.

1.3<meta charset="UTF-8">

Cet élément règle l’encodage, un peu comme choisir l’alphabet avec lequel tu vas écrire tes plans. Avec UTF-8, tes accents et caractères spéciaux s’affichent correctement.

<meta charset="UTF-8">

1.4<title>

C’est le nom du projet. Il apparaît dans l’onglet du navigateur. Comme le panneau à l’entrée du chantier, il indique de quoi il s’agit.

<title>Plan de la maison</title>

1.5<meta viewport>, <link>, <script>

Quelques ajouts indispensables pour adapter et enrichir ton site :

<meta name="viewport"> : pour que la page s’adapte aux écrans (mobile, PC…)
<link> : pour connecter ta feuille de style CSS (les finitions)
<script> : pour ajouter du JavaScript (les automatismes)

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>

1.6Structure complète (résumé)

Voilà le squelette minimal d’une page HTML. C’est ton plan de base, celui que tu réutiliseras partout.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plan de la maison</title>
    <link rel="stylesheet" href="style.css">
    <script src="app.js" defer></script>
  </head>
  <body>
    <h1>Bienvenue dans la maison !</h1>
  </body>
</html>

Astuce

Copie ce code et garde-le précieusement : c'est la base de tout projet web !