Les 4 balises indispensables
Dans la leçon précédente, on a écrit du HTML brut. En réalité, chaque page web a besoin d'une structure complète pour fonctionner correctement dans tous les navigateurs.
Voici les 4 éléments obligatoires :
<!DOCTYPE html>: dit au navigateur « cette page est en HTML5 » (toujours en première ligne)<html>: contient tout le reste de la page<head>: les informations invisibles (titre, métadonnées, liens CSS)<body>: le contenu visible par vos visiteurs
<html> contient <head> et <body>.Head vs Body : invisible vs visible
Le <head> est comme les coulisses d'un théâtre. Le public (vos visiteurs) ne les voit pas, mais elles sont essentielles. On y met :
<title>: le texte qui apparaît dans l'onglet du navigateur<meta charset="UTF-8">: pour que les accents s'affichent correctement (é, è, à, ç)<meta name="description">: la description qui apparaît dans Google
Le <body>, c'est la scène. Tout ce que vos visiteurs voient (texte, images, boutons) va ici.
Pourquoi charset UTF-8 ?
Vous avez déjà vu des pages avec des caractères bizarres à la place des accents ? Des « é » au lieu de « é » ? C'est parce que la page n'a pas déclaré son encodage.
<meta charset="UTF-8"> dit au navigateur : « ce fichier utilise l'encodage universel qui gère les accents français, les kanji japonais, les emojis... tout. » Mettez-le toujours en première ligne du <head>.
La balise <title>
La balise <title> définit le texte dans l'onglet de votre navigateur. C'est aussi ce que Google affiche en gros dans ses résultats de recherche. Un bon titre est court, descriptif et unique pour chaque page.
The 4 essential tags
In the previous lesson, we wrote raw HTML. In reality, every web page needs a complete structure to work properly across all browsers.
Here are the 4 mandatory elements:
<!DOCTYPE html>— tells the browser "this page is HTML5" (always the first line)<html>— contains everything else on the page<head>— invisible information (title, metadata, CSS links)<body>— the content visible to your visitors
<html> contains <head> and <body>.Head vs Body: invisible vs visible
The <head> is like the backstage of a theater. The audience (your visitors) doesn't see it, but it's essential. It contains:
<title>— the text that appears in the browser tab<meta charset="UTF-8">— so accented characters display correctly (é, è, à, ç)<meta name="description">— the description shown in Google results
The <body> is the stage. Everything your visitors see — text, images, buttons — goes here.
Why charset UTF-8?
Have you ever seen pages with weird characters instead of accents? "é" instead of "é"? That's because the page didn't declare its encoding.
<meta charset="UTF-8"> tells the browser: "this file uses the universal encoding that handles French accents, Japanese kanji, emojis... everything." Always put it on the first line of the <head>.
The <title> tag
The <title> tag defines the text in your browser tab. It's also what Google displays prominently in search results. A good title is short, descriptive, and unique for each page.
Copiez ce prompt dans Claude ou ChatGPT :
Génère-moi une page HTML complète minimale avec un titre, une description meta, et un paragraphe de contenu. Explique chaque ligne.
Sans relire la page générée par l'IA : à quoi sert la ligne <meta charset="UTF-8"> et pourquoi la mettre en premier dans le <head> ?
<meta charset="UTF-8"> déclare l'encodage des caractères, pour que les accents (é, è, ç) et caractères spéciaux s'affichent au lieu de « é ». On le place en premier dans le <head> car le navigateur doit connaître l'encodage avant de lire le moindre texte de la page.L'IA a généré cette page, mais elle a placé le <body> à l'intérieur du <head>. Ce n'est pas la bonne structure. Déplacez le <body> pour qu'il soit au même niveau que le <head>, à l'intérieur du <html>.
L'IA te propose cette page « minimale ». Ton rôle de relecteur : l'accepter telle quelle ou la rejeter, et dire pourquoi.
<!DOCTYPE html>
<html>
<head>
<title>Café du coin</title>
</head>
<body>
<h1>Bientôt ouvert</h1>
</body>
</html><meta charset="UTF-8"> : le « é » de « Café » risque de s'afficher en « é ». Il manque aussi lang="fr" sur <html> (utile pour les lecteurs d'écran et le SEO). Le réflexe pro : charset en première ligne du <head> et l'attribut lang dès le départ, même sur une page minimale.Sans remonter dans la leçon : cite les 4 balises indispensables d'une page, et dis ce qui distingue le <head> du <body>.
<!DOCTYPE html> (déclare le HTML5), <html> (contient tout), <head> et <body>. Le <head> regroupe les infos invisibles (title, meta charset, description) que le visiteur ne voit pas directement ; le <body> contient le contenu visible (titres, paragraphes, images, boutons).<meta charset="UTF-8"> ?<!DOCTYPE html> ?Your page skeleton is ready. Now we fill the body: headings and paragraphs, the first tags that give readable text and a clear hierarchy to your content.
Lesson 3: Headings and paragraphs →