Comment le HTML est-il transformé en une page web…

Le processus de conversion du HTML en une page web comprend plusieurs étapes principales :

Analyse du HTML :
- Le navigateur lit le code HTML et construit un arbre d’objets — DOM (Document Object Model).
- Le DOM représente la structure du document sous forme de nœuds (éléments, attributs, texte).
Analyse du CSS :
- Le navigateur lit les styles CSS (externes, internes, en ligne).
- Un arbre de styles — CSSOM (Modèle d’Objet CSS) — est construit.
Construction de l’arbre de rendu (Render Tree) :
- Le DOM et le CSSOM sont combinés.
- Un arbre d’objets contenant des informations visuelles est créé (quels éléments sont visibles et comment ils doivent apparaître). Les éléments avec display: none ne figurent pas dans le Render Tree.
Disposition (Layout/Reflow) :
- Les coordonnées et tailles exactes de chaque élément du Render Tree sont calculées à l’écran.
- Les éléments sont redistribués si leurs tailles ou positions changent (par exemple, lors du redimensionnement de la fenêtre ou de l’ajout de contenu).
Peinture (Painting) :
- Les pixels sont rendus visuellement à l’écran, en utilisant les informations du Render Tree et les résultats du layout.
- La peinture se fait en couches (arrière-plan, bordure, contenu).
Composition (Compositing) :
- Les différentes couches de rendu sont superposées dans le bon ordre pour former l’image finale de la page.

Ces étapes sont effectuées de manière séquentielle, mais certaines peuvent se répéter (par exemple, layout et peinture lors de modifications du DOM ou des styles après le chargement).

<!-- Exemple d’un document HTML5 simple -->
<!DOCTYPE html>
<html>
<head>
    <title>Exemple de page</title>
    <style>
        /* Exemple de styles CSS */
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Bonjour, le monde !</h1> <!-- Élément qui sera ajouté au DOM et au Render Tree -->
    <p style="display: none;">Ce texte est caché.</p> <!-- Élément dans le DOM, mais pas dans le Render Tree -->
</body>
</html>

/* Exemple de CSSOM pour les styles de l’exemple HTML */
/* Représente la structure des styles */
h1 {
    color: blue;
}

Le navigateur analyse le HTML et le CSS, construit des modèles internes, calcule la disposition des éléments et les affiche à l’écran.

Comment le HTML est-il transformé en une page web?