Ce qu'est une page web

Chaque page que tu ouvres commence comme un simple fichier texte. Fais un clic droit sur presque n'importe quelle page, choisis Afficher le code source de la page, et tu pourras lire le HTML envoyé par le serveur.

Une page est un fichier texte

Quand tu tapes une adresse dans un navigateur, celui-ci demande un fichier à un serveur et reçoit du texte brut. Ce texte est écrit en HTML, le HyperText Markup Language (langage de balisage hypertexte). Le navigateur le lit de haut en bas, repère les titres, les paragraphes, les liens et les images, puis dessine la page que tu vois. Tu peux le vérifier sur presque n'importe quel site : fais un clic droit sur la page et choisis Afficher le code source de la page. Derrière les couleurs et la mise en page se cache un long fichier texte lisible.

HTML est un langage de balisage, pas un langage de programmation. Il n'a pas de boucles et ne fait aucun calcul. Son rôle est d'étiqueter le contenu : cette ligne est le titre principal, ces trois lignes forment une liste, cette expression mène vers une autre page. Deux autres langages l'accompagnent en général. CSS décide de l'apparence (couleurs, polices, espacements, mise en page), et JavaScript fait réagir la page aux clics et à la saisie. Ce cours couvre la première couche. Le cours de CSS couvre la deuxième.

Le squelette commun à toutes les pages

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Corner Bakery</title>
  </head>
  <body>
    <h1>Corner Bakery</h1>
    <p>Fresh bread every morning from 7 am.</p>
  </body>
</html>

La première ligne, <!DOCTYPE html>, est un vestige des débuts du web. Son seul rôle aujourd'hui est de dire au navigateur d'utiliser le mode standard au lieu d'un ancien mode de compatibilité qui imite les bugs des navigateurs des années 1990 : garde-la toujours. Vient ensuite l'élément <html>, qui enveloppe tout le document. Son attribut lang indique la langue de la page. Les lecteurs d'écran s'en servent pour choisir la bonne prononciation, et les outils de traduction pour savoir ce qu'ils traduisent.

À l'intérieur de <html>, il y a deux parties. Le <head> contient des informations sur la page qui ne sont pas dessinées dans la page elle-même. <meta charset="utf-8"> indique quel encodage de caractères le fichier utilise ; UTF-8 peut stocker les lettres de tous les systèmes d'écriture, coréen compris, donc le texte ne se transformera pas en symboles bizarres. Le <title> est le nom affiché sur l'onglet du navigateur, dans les favoris et dans les résultats de recherche, et c'est la première chose qu'annonce un lecteur d'écran à l'ouverture de la page. Le <body> contient tout ce qui apparaît à l'écran.

Du texte à l'arbre

Le navigateur ne garde pas ton HTML sous forme d'une longue chaîne. Il l'analyse pour en faire un arbre d'objets appelé le DOM, le Document Object Model. Chaque élément devient un nœud, et les éléments écrits à l'intérieur d'un autre élément deviennent ses enfants. Sur la figure ci-dessous, title est un enfant de head, et h1 et p sont des enfants de body. Les sélecteurs CSS et JavaScript travaillent tous les deux sur cet arbre, et c'est une des raisons pour lesquelles une imbrication soignée compte.

Les navigateurs sont indulgents. Si tu oublies une balise fermante, l'analyseur suit des règles de réparation écrites dans la norme HTML et construit quand même un arbre, mais l'arbre réparé n'est peut-être pas celui que tu voulais. Prendre l'habitude d'écrire la structure correctement évite bien des débogages perplexes plus tard.

Qui écrit les règles

Tim Berners-Lee a rédigé la première proposition du World Wide Web en mars 1989 alors qu'il travaillait au CERN, et à la fin de 1990 le premier serveur web et le premier navigateur y fonctionnaient. HTML a beaucoup grandi depuis. Aujourd'hui, il est défini par le HTML Living Standard, tenu à jour par le WHATWG, un groupe créé par les éditeurs de navigateurs. En 2019, le W3C et le WHATWG se sont mis d'accord pour travailler sur cette version unique. Living (vivant) veut dire que le document n'a pas de numéro de version et qu'il est mis à jour en continu : le nom HTML5 que tu verras encore dans des livres n'est donc qu'une étiquette approximative.

L'éditeur ci-dessous fonctionne comme un minuscule navigateur. Tape à gauche et le résultat apparaît à droite un instant plus tard. Jouer redessine le résultat tout de suite. Quand tu penses avoir terminé, appuie sur Vérifier : la page lance quelques tests sur ton HTML et t'indique ceux qui échouent encore. Recommencer remet le code de départ.