Topic

HTML Parsing & Tokenization

From raw bytes to tokens to the DOM tree. Watch the tokenizer handle error recovery, foster parenting, and parse-insertion modes.

parsertokenizerspec

HTML

sample

<!doctype html>
<html>
  <head><title>Tokenizer</title></head>
  <body>
    <section class="hero">Hello <em>world</em></section>
  </body>
</html>

CSS

sample

body { font: 16px/1.5 system-ui; }
.hero { color: #c084fc; }

JavaScript

sample

console.log('Parsing kicks off once the first bytes arrive!')

Visualizer

HTML Parsing & Tokenization

Step through tokenizer output and watch the open-element stack change.

Visualizer

HTML Tokenizer

Stream bytes → tokens → tree. Step through insertion modes and see the open-element stack update.

live

Controls

HTML Input

Open elements stack: html

Visualization

<html>(whitespace)<body>(whitespace)<main>(whitespace)<h1>Browser Universe</h1>(whitespace)<p>Bytes → tokens → DOM → render tree</p>(whitespace)</main>(whitespace)</body>(whitespace)</html>

Current token: <html>

Insertion mode hint: the stack length guides whether we are in in body, in head, or after body.

Inspector

Byte stream

Streamed incrementally; tokenizer can pause for scripts.

Error recovery

Stray end tags get foster parenting; parser stays resilient.

Tree builder

Tokens feed the tree builder which manages the DOM stack.

Why this matters

Connect the dots between specs (HTML, CSS, WebIDL) and engine behaviors (parser, layout, GPU). Use the sandbox to reproduce each step with your own snippets.

Loading BrowserUniverse...