HTML : le squelette de toutes les pages web depuis 1991
Ou : Le seul langage du web qui n’a jamais eu de concurrent sérieux
Ouvrez n’importe quelle page web, faites un clic droit, « Afficher le code source ». Vous verrez du HTML — HyperText Markup Language. Des balises. <h1>, <p>, <a>, <div>. Ce n’est pas du code au sens où un programmeur l’entend — il n’y a pas de boucles, pas de conditions, pas de variables. C’est un langage de balisage : il décrit la structure et le sens du contenu.
« Ceci est un titre. » « Ceci est un paragraphe. » « Ceci est un lien vers une autre page. » C’est tout ce que fait le HTML. Et c’est suffisant pour être la fondation de chaque page web depuis 1991, quand Tim Berners-Lee a écrit la première spécification au CERN.
Le HTML est complété par le CSS pour l’apparence et le JavaScript pour l’interactivité. Mais sans HTML, il n’y a rien — pas de structure à styliser, pas de contenu à rendre interactif.
Structure, sémantique et pourquoi <div> n’est pas la réponse à tout
Les balises essentielles
| Balise | Rôle | Exemple |
|---|---|---|
<h1> à <h6> | Titres (hiérarchie) | <h1>Mon article</h1> |
<p> | Paragraphe | <p>Du texte.</p> |
<a> | Lien hypertexte | <a href="/page">Lien</a> |
<img> | Image | <img src="photo.jpg" alt="Description"> |
<form> | Formulaire | Champs de saisie, boutons, validation |
<nav>, <header>, <footer> | Structure sémantique | Zones de navigation, en-tête, pied de page |
<article>, <section> | Contenu sémantique | Blocs de contenu indépendants |
Le HTML sémantique : dire ce que c’est, pas à quoi ça ressemble
La différence entre un bon HTML et un mauvais HTML, c’est la sémantique. Un <nav> dit « ceci est une navigation ». Un <div class="nav"> dit « ceci est un rectangle que j’ai décidé d’appeler nav ». Pour le navigateur, pour les moteurs de recherche, pour les lecteurs d’écran — la différence est énorme.
Le HTML sémantique n’est pas un luxe. C’est ce qui rend un site accessible aux personnes utilisant des technologies d’assistance, indexable par Google, et maintenable par un développeur qui n’est pas vous1.
Le dialogue de l’accessibilité
DevOps Dave : Le site est terminé. Tout est en <div> avec des classes CSS.
Security Sarah : Un lecteur d’écran voit quoi ?
DevOps Dave : … Un mur de divs.
Security Sarah : Donc un utilisateur aveugle ne peut pas naviguer ton site. Et Google ne comprend pas la structure de ta page. Remplace tes divs par des balises sémantiques — <nav>, <main>, <article>, <aside>. Même résultat visuel, dix fois mieux pour tout le reste.
Tableau récapitulatif
| Concept | En une phrase |
|---|---|
| HTML | Langage de balisage qui structure le contenu de toutes les pages web. |
| Balise | Élément HTML (<p>, <h1>, <a>) qui donne du sens au contenu. |
| Sémantique | Utiliser la bonne balise pour le bon contenu (pas tout mettre dans des <div>). |
| Accessibilité | Rendre le contenu utilisable par tous, y compris les technologies d’assistance. |
| DOM | Document Object Model — la représentation en arbre du HTML que JavaScript manipule. |
Le mot de la fin
Le HTML est la technologie la plus sous-estimée du web. Il n’est pas sexy, il n’a pas de conférence dédiée, personne ne met « expert HTML » sur LinkedIn. Et pourtant, chaque framework, chaque bibliothèque, chaque application web finit par produire du HTML. React produit du HTML. Vue produit du HTML. Angular produit du HTML. Tout le reste n’est qu’une façon sophistiquée de générer des balises.
L’attribut
altsur les images est l’exemple parfait.<img src="chat.jpg">— le navigateur affiche l’image, mais un lecteur d’écran ne dit rien.<img src="chat.jpg" alt="Un chat roux dormant sur un canapé bleu">— le lecteur d’écran décrit l’image. C’est trois secondes de travail pour le développeur et ça change l’expérience de millions d’utilisateurs. ↩︎