Come l'HTML viene trasformato in una pagina web…

Il processo di conversione di HTML in una pagina web include diverse fasi principali:

Parsing HTML:
- Il browser legge il codice HTML e costruisce un albero di oggetti — DOM (Document Object Model).
- Il DOM rappresenta la struttura del documento sotto forma di nodi (elementi, attributi, testo).
Parsing CSS:
- Il browser legge gli stili CSS (esterni, interni, inline).
- Viene costruito l'albero degli stili — CSSOM (CSS Object Model).
Costruzione dell'albero di rendering (Render Tree):
- Il DOM e il CSSOM vengono combinati.
- Viene creato un albero di oggetti che contiene informazioni visive (quali elementi sono visibili e come devono apparire). Gli elementi con display: none non appaiono nel Render Tree.
Layout (Reflow):
- Vengono calcolate le coordinate e le dimensioni esatte di ogni elemento nel Render Tree sullo schermo.
- Gli elementi vengono ridistribuiti se le loro dimensioni o posizioni cambiano (ad esempio, al cambiare delle dimensioni della finestra o all'aggiunta di contenuto).
Painting:
- I pixel vengono renderizzati visivamente sullo schermo, usando le informazioni dal Render Tree e i risultati del layout.
- La pittura avviene a strati (sfondo, bordo, contenuto).
Compositing:
- I vari strati di rendering vengono sovrapposti nell'ordine corretto per formare l'immagine finale della pagina.

Questi passaggi vengono eseguiti in sequenza, anche se alcuni possono ripetersi (ad esempio, layout e painting quando si modificano il DOM o gli stili dopo il caricamento).

<!-- Esempio di un documento HTML5 semplice -->
<!DOCTYPE html>
<html>
<head>
    <title>Esempio di pagina</title>
    <style>
        /* Esempio di stili CSS */
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Ciao, mondo!</h1> <!-- Elemento che verrà aggiunto al DOM e al Render Tree -->
    <p style="display: none;">Questo testo è nascosto.</p> <!-- Elemento nel DOM, ma non nel Render Tree -->
</body>
</html>

/* Esempio di CSSOM per gli stili dell'esempio HTML */
/* Rappresenta la struttura degli stili */
h1 {
    color: blue;
}

Il browser analizza HTML e CSS, costruisce modelli interni, calcola la disposizione degli elementi e li rende sullo schermo.

Come l'HTML viene trasformato in una pagina web?