C'est quoi HTML et CSS ? Comment marche une page web

HTML (HyperText Markup Language) est le langage de balisage qui décrit le contenu d'une page web et sa structure ; CSS (Cascading Style Sheets, « feuilles de style en cascade ») est le langage qui décrit sa présentation. Ce chapitre montre ce qui se passe quand ton navigateur affiche une page, le rôle de chacun des deux langages, et comment préparer ton poste pour écrire ta première page.

Ce qui se passe quand tu ouvres une page web

Tu tapes l'adresse https://www.mediatheque-tilleuls.fr/agenda.html dans ton navigateur. En une fraction de seconde, il se passe ceci :

1. Résolution du nom. Le navigateur demande à un serveur DNS l'adresse IP qui correspond à www.mediatheque-tilleuls.fr.
2. Connexion. Il ouvre une connexion chiffrée (HTTPS, port 443) avec le serveur web qui héberge le site.
3. Requête. Il envoie une requête HTTP : « donne-moi /agenda.html ».
4. Réponse. Le serveur renvoie le fichier HTML, un simple fichier texte.
5. Ressources. En lisant le HTML, le navigateur découvre qu'il lui faut aussi une feuille de style (style.css), des images, peut-être un script JavaScript. Il envoie une requête par fichier.
6. Affichage. Il construit l'arbre des éléments de la page (le DOM), lui applique les règles CSS, calcule la position de chaque boîte et peint le résultat à l'écran.

Retiens l'idée principale : le serveur envoie du texte, c'est le navigateur qui fabrique l'affichage. Le même fichier HTML peut donc s'afficher différemment selon l'écran, le navigateur ou les réglages de la personne (taille de texte agrandie, mode sombre, lecteur d'écran qui lit la page à voix haute). Écrire du HTML, ce n'est pas dessiner une page : c'est décrire un contenu pour que n'importe quel navigateur puisse l'afficher.

HTML, CSS et JavaScript : trois rôles différents

Une page web moderne s'appuie sur trois langages, chacun avec un rôle bien séparé.

L'analogie classique est celle de la maison : HTML, ce sont les murs et les pièces ; CSS, la décoration et l'aménagement ; JavaScript, l'électricité qui fait fonctionner les volets roulants. Tu peux repeindre tous les murs sans déplacer une cloison : de la même façon, tu peux changer toute l'apparence d'un site en ne touchant qu'au CSS.

Cette séparation du fond et de la forme est un principe que tu retrouveras partout : le contenu reste lisible même si le CSS ne se charge pas (connexion lente, lecteur d'écran, moteur de recherche qui analyse la page), et la charte graphique d'une organisation tient dans une seule feuille de style partagée par toutes les pages.

Qui définit HTML et CSS, et quelle version utiliser

Tu croiseras encore les mots « HTML5 » et « CSS3 » dans les offres de stage et les manuels. Ils datent des années 2010 et ne désignent plus vraiment une version :

• HTML est un standard « vivant » (HTML Living Standard), tenu à jour en continu par le WHATWG, le groupe qui réunit les éditeurs de navigateurs. Depuis un accord de 2019 avec le W3C, c'est la seule spécification de HTML. Quand on dit « HTML5 » aujourd'hui, on veut simplement dire « HTML moderne ».
• CSS est découpé en modules (sélecteurs, couleurs, Flexbox, Grid…) qui évoluent chacun à leur rythme au sein du W3C. Il n'y aura pas de « CSS4 » : chaque module a ses propres niveaux.

La vraie question n'est donc pas « quelle version ? », mais « cette fonctionnalité marche-t-elle dans les navigateurs de mes utilisateurs ? ». Deux outils y répondent :

• MDN Web Docs (developer.mozilla.org, en partie traduit en français) : la documentation de référence de chaque balise et propriété, avec un tableau de compatibilité en bas de page.
• Can I use (caniuse.com) : le pourcentage d'utilisateurs dont le navigateur gère une fonctionnalité.

Sur MDN, tu verras aussi un badge Baseline. Il signale qu'une fonctionnalité marche dans les versions actuelles de Chrome, Edge, Firefox et Safari (newly available), puis, trente mois plus tard, qu'elle est utilisable sans précaution (widely available). C'est un bon repère pour décider si tu peux utiliser une nouveauté dans un projet.

Installer ton environnement

Pour écrire du HTML et du CSS, un éditeur de texte suffit. Prends Visual Studio Code (VS Code), gratuit, celui que tu utiliseras aussi pour PHP, JavaScript ou Python. Deux réglages rendent le travail plus confortable :

• l'extension Live Server : clic droit sur un fichier HTML, Open with Live Server, et la page se recharge toute seule à chaque enregistrement ;
• l'enregistrement automatique (Fichier > Enregistrement automatique), pour ne plus oublier Ctrl+S.

VS Code intègre Emmet, un raccourci qui fait gagner beaucoup de temps : dans un fichier .html vide, tape ! puis Tab, et le squelette complet d'une page apparaît. Tape ul>li*3 puis Tab, et tu obtiens une liste de trois éléments.

Crée un dossier pour ton site et range-le dès le départ :

mediatheque/
├── index.html        ← la page d'accueil
├── agenda.html
├── css/
│   └── style.css
└── images/
    └── facade.jpg

Le fichier index.html a un nom particulier : c'est la page qu'un serveur web renvoie quand on demande un dossier sans préciser de fichier. https://www.mediatheque-tilleuls.fr/ affiche donc index.html.

Ta première page

Crée index.html et tape :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Médiathèque des Tilleuls</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1>Médiathèque des Tilleuls</h1>
    <p>Ouverte du mardi au samedi, entrée libre et gratuite.</p>
  </body>
</html>

Puis crée css/style.css :

body {
  font-family: system-ui, sans-serif;
  color: #1f2937;
}

h1 {
  color: #0f766e;
}

Ouvre index.html dans le navigateur (double-clic ou Live Server). Le titre s'affiche en vert foncé, le paragraphe en gris très foncé. Tu viens d'utiliser les deux langages : le HTML dit « ceci est le titre principal, ceci est un paragraphe », le CSS dit « le titre principal est vert ». Le chapitre 2 explique chaque ligne du squelette.

Une page ouverte par double-clic a une adresse qui commence par file:// : le navigateur lit le fichier sur ton disque, sans serveur. Ça suffit pour HTML et CSS. Live Server, lui, démarre un petit serveur web local (http://127.0.0.1:5500), plus proche des conditions réelles : certaines fonctions, comme les modules JavaScript, ne marchent qu'avec une adresse en http://.

Les outils de développement du navigateur

Chaque navigateur embarque des outils de développement : appuie sur F12 (ou clic droit sur un élément, Inspecter). Tu t'en serviras tous les jours.

Le réflexe à prendre : quand une règle CSS « ne marche pas », inspecte l'élément avant de modifier quoi que ce soit. Tu verras tout de suite si la règle est appliquée, barrée par une autre plus forte (chapitre 7) ou absente parce que le fichier CSS n'est pas chargé (onglet Réseau : style.css en 404).

Valider ton code

Un navigateur est très tolérant : il affiche quelque chose même si ton HTML est faux, en devinant ce que tu voulais dire. Le problème, c'est que chaque navigateur peut deviner différemment, et qu'un lecteur d'écran ou un moteur de recherche peut mal comprendre la page. Le validateur du W3C (validator.w3.org) vérifie ton HTML et liste les erreurs :

Error: End tag "p" seen, but there were open elements.
From line 12, column 5; to line 12, column 8
Error: Element "li" not allowed as child of element "body" in this context.
Warning: Consider adding a "lang" attribute to the "html" start tag.

Chaque erreur donne la ligne et la colonne. Corrige toujours la première erreur d'abord : une balise mal fermée en provoque souvent dix autres plus bas, qui disparaissent avec elle. Le W3C propose aussi un validateur CSS (jigsaw.w3.org/css-validator).

Exercices

Error: Stray end tag "div". From line 40, column 3
Error: Unclosed element "section". From line 18, column 5
Warning: The "type" attribute is unnecessary for JavaScript resources. From line 52, column 5