From HTML to a page

The browser does more than display an HTML file. It parses several languages, combines their results, calculates geometry, and paints pixels.

The rendering pipeline

flowchart TD
    HTML[HTML bytes] --> DOM[Document tree]
    CSS[CSS bytes] --> CSSOM[Style rules]
    DOM --> Render[Render tree]
    CSSOM --> Render
    Render --> Layout[Layout]
    Layout --> Paint[Paint]
    Paint --> Screen[Pixels]

HTML supplies meaning and structure. CSS supplies presentation rules. JavaScript can change both after the initial page has loaded.

Why this matters

When a page looks wrong, knowing the pipeline narrows the search. Missing content may point to HTML or JavaScript. Incorrect spacing suggests CSS or layout. A blank page can mean the browser received no usable document at all.