Comprendre ce qu'est le HTML, d'où il vient, qui fixe ses règles (le W3C et le WHATWG) et comment un navigateur transforme un fichier texte en page web.
Un restaurant de poisson à Essaouira veut une page web pour présenter son menu. Le patron imagine que c'est un logiciel compliqué. En réalité, une page web est un simple fichier texte, écrit dans un langage de balises : le HTML. Le navigateur de chaque client lit ce fichier et dessine la page.
Une page web n'est qu'un fichier texte : index.html contient du texte entouré de balises.
Le HTML (HyperText Markup Language) décrit le contenu et la structure d’une page web : titres, paragraphes, images, liens. Il s’écrit avec des balises entre chevrons.
<h1>Restaurant La Sardine</h1>
<p>Poisson frais tous les jours.</p>
Une balise peut avoir des attributs, qui précisent des informations : <img src="sardines.jpg" alt="Sardines grillées">.
| Année | Étape |
|---|---|
| 1991 | Tim Berners-Lee, au CERN, publie la première page web |
| 1995 | HTML 2.0, premier standard |
| 1999 | HTML 4.01, très utilisé pendant dix ans |
| 2014 | HTML5 : balises sémantiques, vidéo, audio, formulaires modernes |
| aujourd’hui | le « HTML vivant », mis à jour en continu |
Le W3C (World Wide Web Consortium) et le WHATWG écrivent les standards du Web. Grâce à eux, une page bien écrite s’affiche de la même façon dans tous les navigateurs. Le validateur du W3C (validator.w3.org) signale les erreurs d’un fichier HTML.
Chrome, Firefox, Edge ou Safari font tous la même chose :
Chaque navigateur a aussi ses outils de développement (touche F12) pour inspecter le code d’une page : c’est votre meilleur allié pour comprendre et corriger.
| Langage | Rôle | Comparaison |
|---|---|---|
| HTML | le contenu et la structure | les murs de la maison |
| CSS | la présentation | la peinture et la décoration |
| JavaScript | le comportement | l’électricité, ce qui bouge |
Sur chaque carton on écrit « cuisine », « fragile », « livres ». Les balises HTML sont des étiquettes : elles disent au navigateur ce qu'est chaque morceau de texte (un titre, un paragraphe, une image).
<h1>Restaurant La Sardine</h1> <p>Poisson frais tous les jours.</p>
Comme des parenthèses : on ouvre <p>, on écrit le contenu, on ferme </p>. Certaines balises sont vides et ne se ferment pas, comme <br> (retour à la ligne) ou <img>.
<p>Ouvert de <strong>12h</strong> à 23h</p>
Trouvez les trois erreurs : <h1>Menu<h1> <p>Tajine de poisson : 70 DH <p>Thé à la menthe</p>
<h1>Menu</h1> (la balise fermante a un /) <p>Tajine de poisson : 70 DH</p> (le premier paragraphe n'était pas fermé) <p>Thé à la menthe</p> (le second <p> n'avait pas d'ouverture propre)
Créez sur votre bureau un fichier menu.html avec le Bloc-notes, écrivez un titre et un paragraphe, puis ouvrez-le en double-cliquant. Que se passe-t-il ?
Le navigateur par défaut s'ouvre et affiche la page. L'adresse commence par file:/// : la page est lue sur votre disque, sans serveur ni Internet. Un fichier .html suffit.
Expliquez en deux phrases pourquoi les règles du HTML sont fixées par des organismes (W3C, WHATWG) et non par chaque navigateur.
Pour qu'une même page s'affiche de la même façon sur Chrome, Firefox, Safari ou Edge. Les navigateurs s'engagent à respecter un standard commun, et les développeurs écrivent un seul code.