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.
Ce que Google et les réseaux voient
Trois balises transforment une page d'exercice en page réelle. Elles se placent toutes dans le <head>, invisibles pour le visiteur mais décisives pour le reste du monde.
La description Google :
<meta name="description" content="Un café artisanal au cœur de Lyon, ouvert 7j/7.">C'est le texte gris sous le titre bleu dans les résultats de recherche. Google ne l'utilise pas pour le classement, mais les internautes le lisent pour décider de cliquer.
Le favicon :
<link rel="icon" href="favicon.ico">La petite icône dans l'onglet du navigateur. Sans elle, le navigateur affiche une icône générique. Un simple fichier 32x32 pixels suffit.
Open Graph (partage sur les réseaux) :
<meta property="og:title" content="Café du Coin">
<meta property="og:image" content="https://example.com/photo.jpg">Quand quelqu'un partage votre page sur LinkedIn, Twitter ou WhatsApp, ces deux balises définissent le titre et l'image de l'aperçu. Sans elles, le réseau pioche n'importe quoi sur la page, ou n'affiche rien.
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.
What Google and social networks see
Three tags turn a practice page into a real page. They all go in the <head>, invisible to visitors but decisive for the rest of the world.
The Google description:
<meta name="description" content="An artisan coffee shop in the heart of Lyon, open 7 days a week.">This is the grey text under the blue title in search results. Google doesn't use it for ranking, but users read it to decide whether to click.
The favicon:
<link rel="icon" href="favicon.ico">The small icon in the browser tab. Without it, the browser shows a generic icon. A simple 32x32 pixel file is enough.
Open Graph (social sharing):
<meta property="og:title" content="Corner Cafe">
<meta property="og:image" content="https://example.com/photo.jpg">When someone shares your page on LinkedIn, Twitter or WhatsApp, these two tags define the title and image of the preview card. Without them, the network picks something random from your page, or shows nothing at all.
🎯 Pratique
S'entraîner (clique pour ouvrir) :
✨ Prompt IA
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.
💬 Ré-explique sans regarder
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>.
⚖️ Juge le code de l'IA
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.🧠 Rappel libre
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> ?Le squelette de votre page est en place. Maintenant on remplit le body : titres et paragraphes, les premières balises qui donnent du texte lisible et une hiérarchie claire à vos contenus.
Leçon 3 : Titres et paragraphes →