Le langage du Web : HTML, CSS & JavaScript — Le trio qui fait tourner le monde
Le World Wide Web repose sur trois technologies fondamentales, mais HTML (HyperText Markup Language) est le langage fondateur — le squelette sur lequel chaque page web est construite.
🏗️ HTML : Structure & Sémantique
- Rôle : Définit ce qu'est le contenu (titre, paragraphe, liste, image, lien, formulaire, article, nav).
- Mécanisme : Balises (`
`, `
- HTML5 sémantique : `
`, ` - Exemple :
<article> <header> <h1>Le langage du Web</h1> <p>Publié <time datetime="2024-01-15">15 janv. 2024</time></p> </header> <p>HTML fournit la structure...</p> </article>
🎨 CSS : Présentation & Mise en page
- Rôle : Définit comment HTML apparaît — couleurs, polices, espacements, grille/flexbox, animations, points de rupture responsive.
- Cascade : Défauts navigateur → Styles utilisateur → Styles auteur (inline > ID > classe > élément).
- CSS moderne (2024) : Container Queries, `:has()`, Imbrication CSS, Subgrid, `color-mix()`, `view-transitions`.
⚡ JavaScript : Comportement & Interactivité
- Rôle : Définit ce qui se passe — manipulation DOM, fetch/API, gestion état, UI complexes (React/Vue/Svelte), WebAssembly.
- ES2024 : `Object.groupBy`, `Promise.withResolvers`, API Temporal (dates), Décorateurs.
- Exécution : Boucle événementielle mono-thread + file micro-tâches. Compilation JIT (V8, SpiderMonkey, JavaScriptCore).
Comment ils s'assemblent : Le chemin de rendu critique
- Octets HTML → Arbre DOM (Document Object Model).
- Octets CSS → Arbre CSSOM (CSS Object Model).
- DOM + CSSOM → Arbre de rendu (nœuds visibles + styles calculés).
- Mise en page (Reflow) → Peinture → Composition → Pixels à l'écran.
- JavaScript s'exécute, mute DOM/CSSOM → cycle se répète (incrémental).
Au-delà du trio : Technologies web essentielles
- HTTP/2, HTTP/3 (QUIC) : Transport multiplexé, chiffré.
- API Web : Fetch, WebRTC, WebGL/WebGPU, Web Workers, Service Workers (PWA).
- WASM (WebAssembly) : Vitesse quasi-native pour C++/Rust/Go dans navigateur.
- Accessibilité (ARIA, WCAG 2.2) : HTML sémantique + rôles/états pour tech d'assistance.
HTML est le seul langage obligatoire — une page avec juste HTML fonctionne. CSS/JS enrichissent. Mais les apps web modernes sont inséparables du trio.