HTML Parsing & the Render Tree
The problem
Raw HTML text arriving over the network needs to be turned into the structured DOM tree a browser can actually work with, and that DOM then needs to be filtered and combined with styling information into a second tree containing only what will actually be visible.
Why now
The DOM as a tree established the target structure; this topic explains how raw bytes become that structure — a parsing process — and introduces the render tree, a second, related tree the DOM alone doesn't capture, needed because not every DOM node is visible (display: none nodes are excluded).
Mental model
HTML parsing is building a tree from text, one tag at a time, handling the reality that real-world HTML is often malformed and must still produce a sensible result. The render tree is the DOM tree filtered and merged with computed CSS — DOM answers 'what exists,' render tree answers 'what will actually be painted,' and the two diverge exactly at invisible elements.
Requires
- The DOM as a TreeBrowser Internals
The render tree is derived directly from the DOM tree, filtered by visibility and augmented with style; you need the DOM as the input structure before its derived, rendering-focused counterpart makes sense.
Unlocks
Used in
- Every page load, as the very first step before anything is visible
- Understanding why display: none removes an element from the render tree but visibility: hidden does not
- Streaming HTML parsing, letting a browser start rendering before the full document has arrived
- Browser DevTools' rendering performance tools built on this parse-then-render pipeline
Projects
- Compare a DOM tree to its corresponding render tree for a page containing a display: none element, and explain the difference directly
- Deliberately write malformed HTML (unclosed tags) and inspect how the browser's parser still recovers a sensible DOM
Examples
- An element with display: none exists in the DOM but has no corresponding node in the render tree
- The browser's HTML parser recovers from a missing closing </div> tag using well-defined error-recovery rules, not by failing outright
Resources
- How browsers work — web.devarticle
Mastery checklist
- I can explain the difference between the DOM tree and the render tree
- I can explain why display: none and visibility: hidden affect the render tree differently
- I can describe HTML parsing as producing a tree from a token stream
- I can explain why browsers can start rendering before a full HTML document has finished downloading