Anatomie page web moderne : Du balisage au rendu
Une page web est une ressource composite assemblée par le navigateur depuis plusieurs technologies.
Blocs constitutifs fondamentaux
- HTML – Structure sémantique : titres, paragraphes, formulaires, liens.
- CSS – Design visuel : layout (Flexbox/Grid), typographie, couleur, points rupture responsive.
- JavaScript – Interactivité : manipulation DOM, fetch/XHR, frameworks (React, Vue).
- Assets médias – Images (WebP, AVIF), vidéo (H.264/HEVC), audio, graphiques WebGL/Canvas.
- Polices & Icônes – Polices WOFF2, systèmes icônes SVG.
- Métadonnées – Tags SEO, Open Graph, JSON-LD données structurées.
Pipeline livraison
- Développeur écrit fichiers sources.
- Outils build (Vite, Webpack) bundlent, minifient, hachent noms fichiers.
- Fichiers déployés sur serveur origine ou nœuds edge CDN.
- Navigateur demande HTML → parse → découvre sous-ressources → récupère en parallèle → construit Render Tree → peint pixels.
Performance repose sur optimisation chemin critique : CSS above-the-fold en ligne, JS non essentiel différé, exploitation multiplexage HTTP/2 ou HTTP/3.