Mon approche de la page web, séparer le fond de la forme, en 2025, pourrait être considérée comme désuète pour certains champions de la dernière technologie à la mode. Elle est cependant la garantie d’une grande robustesse et d’une bonne accessibilité.
HTML, pour organiser les idées, les pensées
Quand Tim Berners-Lee et Roger Cailliau offrent le World Wide Web (WWW ou W3) au monde, l’idée est de proposer un moyen de partager et lier entre-elles des idées, des publications, de les rendre accessibles. Le tout n’est donc pas uniquement de définir un protocole d’échange et le concept d’hyperlien mais également, culture scientifique oblige, un format de document exposant l’organisation de son contenu. Un système de balisage sémantique, inspiré du Standard General Markup Language (SGML), est né, L’Hypertext Language Markup.
Depuis le première proposition de Sir Tim-Berners-Lee en 1989 et la mise dans le domaine public du logiciel WWW par le CERN en 1993, la nomenclature du HTML a évolué. Elle demeure cependant avant tout un système sémantique de description et d’organisation d’un contenu de manière à le rendre lisible par une personne et interprétable par une machine.
Structure d’une page
Un document HTML est un fichier grossièrement organisé comme suit, un ensemble de blocs de texte délimités par des balises (ou tags) prenant la forme <mot> puis </mot>, si nécessaire[1], pour marquer explicitement la fin d’un segment.
<!doctype html>
<html>
<head>
<!-- plusieurs lignes -->
</head>
<body>
<!-- plusieurs lignes -->
</body>
</html>
La première ligne informe de la nomenclature utilisée pour décrire le document (doctype étant l’abréviation de document type ou type de document en français). La recommandation 5 du HTML a beaucoup simplifié cette ligne qui fut le siège de nombreux combats et le lieu d’artifices pour forcer l’interprétation d’une page d’une certaine manière par Internet Explorer[2].
<html>
Est la balise qui encadre l’ensemble du document. Ce qui la précède ou la suit[3] n’en fait pas partie et ne devrait pas être interprété.
<head>
L’en-tête contenu par cette balise est utilisé pour deux choses. Fournir des informations complémentaires sur le document, que l’on appelle les métadonnées, en est une. La seconde est d’indiquer au logiciel de navigation des liens vers les dépendances permettant une interprétation idéale de la page. Un en-tête classique pourrait se présenter comme ci-après.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Le titre de ma page</title>
</head>
Avec cinq lignes, en utilisant trois balises différentes (et leurs attributs qui seront abordés par la suite) nous avons déclaré :
- que le texte du document est encodé suivant la table de caractères UTF-8
- que la largeur de l’affichage à considérer est celle communiquée par le périphérique et que l’échelle d’affichage à utiliser est 100%
- à quelle adresse se trouve la miniature à utiliser pour les favoris ou les onglets
- qu’un fichier de feuille de styles est également disponible (et à quelle adresse)
- que le titre de la page est « Le titre de ma page »
<body>
Désigne, littéralement, le corps de la page web, le contenu à présenter à la visiteuse ou au visiteur : titres, paragraphes, liste, médias et bien évidemment tous les liens internes ou extérieurs au site consulté. Tous ces éléments de la page sont appelés des… éléments, justement.
<body>
<h1>Titre de premier niveau</h1>
<p>Un paragraphe qui contient des mots <strong>mis en avant</strong></p>
<h2>Un titre de moindre niveau</h2>
<h3>Un titre de moindre moindre niveau</h3>
<p>Un paragraphe qui contient également des mots <strong>mis en avant</strong> mais également un <a href="ailleurs.html">lien</a> !</p>
</body>
Sans dévoyer le sujet, on peut déjà noter qu’ils en existe deux types, block (bloc) et inline (en ligne ? linéaire ?). Il faut savoir également que si les éléments de type bloc peuvent contenir indifféremment leurs semblables et des linéaires, ces derniers ne peuvent pas contenir de bloc mais, encore une fois, ce point sera abordé plus tard.
Baliser sans se faire peur
Le langage HTML est conçu avant tout pour être résistant à l’erreur. C’est à dire que les outils qui interprètent le balisage ont pour priorité d’afficher le contenu balisé, peu importe si les balises ne sont pas correctement fermées ni imbriquées ou même si elles sont inexistantes dans les recommandations spécifiant le langage.
Le navigateur se débrouillera pour clore logiquement (pour lui) tout élément ouvert et considérera les éléments inconnus comme des blocs génériques. Il en résultera sans doute un affichage étrange, décalé, mais le contenu de la page sera consultable et compréhensible.
Rédigé à Toulouges en mai 2025.