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
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
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.
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>.
<meta charset="UTF-8"> ?<!DOCTYPE html> ?