Lesson 11 · How browsers use HTML

From HTML to the DOM tree

A browser never draws your HTML file directly. It first turns the file's bytes into characters, the characters into tokens, and the tokens into a tree of objects in memory: the DOM. Follow a five-line file through the real parsing rules of the HTML standard and watch the stack of open elements push and pop as the tree grows. On the way, the parser adds the html, head and body elements the file left out and closes a paragraph it left open. Then a line of JavaScript changes the tree while the file stays the same.

12 min11 steps5 questionsAdvanced

Fig 11 · Interactive

Loading figure…

or ← →

Check yourself

5 quick questions

Pick an answer to see why. Your score saves with your progress.

01In what order does a browser turn an HTML file into a DOM?

The decoder turns bytes into characters, the tokenizer groups characters into tokens, and tree construction turns tokens into nodes of the DOM tree.

02The file is just <title>Cafe</title> followed by <h1>Menu</h1>. Where does the h1 end up in the DOM?

An h1 cannot go in head, so the parser pops head, creates the body element the file never wrote, and puts the h1 inside it.

03The stack of open elements is [ html, body, p ]. The tokenizer emits the start tag <em>. Where does the new em element go?

New nodes go inside the element on top of the stack. em is then pushed itself, so the text after it goes inside em until </em> pops it.

04Line 4 is <p>Hot <em>mocha</em> with no </p>, and line 5 starts with <p>. What does the parser do?

A p cannot contain another p. When a p is still open, a new <p> start tag closes it first (an implied </p>), so the two paragraphs end up side by side in body.

05A script runs document.querySelector("em").textContent = "cocoa". What changes?

Scripts change the DOM, the live tree in memory, and the browser updates the page. The file stays as it was, so View Page Source still shows mocha.

Key terms

Glossary

DOM: Document Object Model: the page as a tree of objects in the browser's memory, which scripts can read and change.
Node: One object in the DOM tree, such as the Document, an element or a piece of text. Every node except the Document has one parent.
Character encoding: The rule that turns bytes into characters. Web pages should use UTF-8, where each ASCII character is one byte.
Token: One unit the tokenizer produces from the characters: a DOCTYPE, a start tag, an end tag, a comment, a character (text is a run of character tokens), or end-of-file.
Tokenizer: The part of the parser that reads characters one at a time and groups them into tokens.
Stack of open elements: The parser's list of elements that are still open. A start tag pushes an element; its end tag pops it; new nodes go inside the top one.
Implied tag: A start or end tag the file left out, which the parser adds by itself, such as html, head, body or a missing </p>.
Standards mode: The rendering mode a browser uses when the page starts with <!DOCTYPE html>; without it, browsers fall back to quirks mode.

Fine print

Notes and sources

The line breaks between tags also become small text nodes that hold only whitespace. The figure leaves them out, as browser developer tools usually do.
A real browser parses a page in a few milliseconds and starts building the tree before the last byte arrives. The figure slows it down to one line per step.
Every character in this file is ASCII, so each one is a single byte in UTF-8. A real page also declares its encoding with <meta charset="utf-8"> near the top of head.
Leaving out html, head and body, and the end tags of the two paragraphs, is allowed by the HTML standard. The parser rules shown here are the standard ones, so every browser builds the same tree.
The standard's tokenizer actually emits one character token per character. The figure groups a run of character tokens into one text token, the way the tree builder joins them into one text node.
A plain <script> element pauses the parser while the script is fetched (if it is an external file) and runs. That is the subject of the lesson on loading scripts.

Quiz Unlocks after the last step.