How is HTML transformed into a web page?

The process of converting HTML into a web page involves several main stages:

Parsing HTML:
- The browser reads the HTML code and constructs a tree of objects — the DOM (Document Object Model).
- The DOM represents the document structure as nodes (elements, attributes, text).
Parsing CSS:
- The browser reads CSS styles (external, internal, inline).
- A style tree is built — CSSOM (CSS Object Model).
Building the Render Tree:
- The DOM and CSSOM are combined.
- A tree of objects containing visual information is created (which elements are visible and how they should look). Elements with display: none are not included in the Render Tree.
Layout (Reflow):
- The exact geometric coordinates and sizes of each Render Tree element are calculated on the screen.
- Elements are reallocated if their sizes or positions change (e.g., when resizing the window or adding content).
Painting:
- Pixels are visually rendered on the screen using information from the Render Tree and the layout results.
- Layered rendering occurs (background, border, content).
Compositing:
- Different rendering layers are overlaid in the correct order to form the final image of the page.

These stages are performed sequentially, but some may repeat (for example, Layout and Painting when DOM or styles change after loading).

<!-- Example of a simple HTML5 document -->
<!DOCTYPE html>
<html>
<head>
    <title>Example Page</title>
    <style>
        /* Example CSS styles */
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Hello, world!</h1> <!-- Element added to DOM and Render Tree -->
    <p style="display: none;">This text is hidden.</p> <!-- Element in DOM but not in Render Tree -->
</body>
</html>

/* Example CSSOM for styles from the HTML example */
/* Represents the style structure */
h1 {
    color: blue;
}

The browser parses HTML and CSS, builds internal models, calculates element positions, and renders them on the screen.