Anatomia di una pagina web moderna: dal markup al rendering

Una pagina web è una risorsa composita assemblata dal browser da molte tecnologie.

Blocchi costitutivi fondamentali

• HTML — Struttura semantica: titoli, paragrafi, moduli, link.
• CSS — Design visivo: layout (Flexbox/Grid), tipografia, colore, breakpoint reattivi.
• JavaScript — Interattività: manipolazione DOM, fetch/XHR, framework (React, Vue).
• Risorse multimediali — Immagini (WebP, AVIF), video (H.264/HEVC), audio, grafica WebGL/Canvas.
• Font e icone — Font WOFF2, sistemi di icone SVG.
• Metadati — Tag SEO, Open Graph, dati strutturati JSON-LD.

Pipeline di consegna

1. Lo sviluppatore crea i file sorgente.
2. Strumenti di build (Vite, Webpack) bundlano, minificano, hashano i nomi dei file.
3. I file vengono distribuiti al server di origine o ai nodi edge CDN.
4. Il browser richiede HTML → analizza → scopre le sotto-risorse → le recupera in parallelo → costruisce l'albero di rendering → dipinge i pixel.

Le prestazioni dipendono dall'ottimizzazione del percorso critico: CSS sopra la piega in linea, JS non essenziale differito, sfruttamento del multiplexing HTTP/2 o HTTP/3.