Hoe wordt HTML omgezet in een webpagina?

Het proces van het omzetten van HTML naar een webpagina omvat verschillende hoofd fasen:

HTML parseren:
- De browser leest de HTML-code en bouwt een objectboom — DOM (Document Object Model).
- Het DOM vertegenwoordigt de structuur van het document in de vorm van knooppunten (elementen, attributen, tekst).
CSS parseren:
- De browser leest de CSS-stijlen (extern, intern, inline).
- Er wordt een stijlboom gebouwd — CSSOM (CSS Object Model).
Bouwen van de renderboom (Render Tree):
- DOM en CSSOM worden gecombineerd.
- Er wordt een boom van objecten gemaakt die visuele informatie bevat (welke elementen zichtbaar zijn en hoe ze eruit moeten zien). Elementen met display: none worden niet in de Render Tree opgenomen.
Lay-out (Reflow):
- De exacte coördinaten en afmetingen van elk element in de Render Tree worden berekend.
- Elementen worden opnieuw gerangschikt als hun afmetingen of posities veranderen (bijvoorbeeld bij het wijzigen van de venstergrootte of het toevoegen van inhoud).
Schilderen (Painting):
- Pixels worden visueel op het scherm weergegeven, gebruikmakend van de informatie uit de Render Tree en de resultaten van de lay-out.
- Het schilderen gebeurt in lagen (achtergrond, rand, inhoud).
Samenstellen (Compositing):
- Verschillende lagen van rendering worden in de juiste volgorde over elkaar gelegd om het uiteindelijke beeld van de pagina te vormen.

Deze stappen worden sequentieel uitgevoerd, maar sommige kunnen zich herhalen (bijvoorbeeld lay-out en schilderen bij wijzigingen in DOM of stijlen na het laden).

<!-- Voorbeeld van een eenvoudige HTML5-document -->
<!DOCTYPE html>
<html>
<head>
    <title>Voorbeeldpagina</title>
    <style>
        /* Voorbeeld CSS-stijlen */
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Hallo, wereld!</h1> <!-- Element dat wordt toegevoegd aan DOM en Render Tree -->
    <p style="display: none;">Deze tekst is verborgen.</p> <!-- Element in DOM, maar niet in Render Tree -->
</body>
</html>

/* Voorbeeld CSSOM voor de stijlen uit de HTML */
/* Vertegenwoordigt de structuur van stijlen */
h1 {
    color: blue;
}

De browser analyseert HTML en CSS, bouwt interne modellen, berekent de positie van elementen en rendert ze op het scherm.