PlainFinch · HTML · Lesson 01 diagram

How your code becomes a page

The browser never draws your text file directly. It reads the code, builds a tree of elements, then draws that tree. Every element exists in all three places.

1 · YOUR CODE 2 · THE DOM TREE 3 · THE PAGE 1<main> 2 <h1>Corner Bakery</h1> 3 <p>Fresh bread daily 4 <ul> 5 <li>Sourdough</li> 6 <li>Rye</li> 7 </ul> 8</main> no </p> parse reads tags main h1 p ul li li “Corner Bakery” “Fresh bread daily” “Sourdough” “Rye” closed for you before <ul> render layout + paint cornerbakery.example main Corner Bakeryh1 Fresh bread dailyp ul Sourdoughli Ryeli What you write: plain text What the browser builds in memory What people see (dashed boxes = elements)
1 · Your codePlain text in a file. Tags like <h1> name each part. Line 3 forgets its </p>, a mistake browsers see constantly.
2 · The DOM treeThe browser reads the tags in order and builds a family tree of elements. It quietly closes the paragraph before <ul>, so the page still works. Other mistakes aren’t repaired so neatly.
3 · The pageThe browser lays out the tree and paints it. Each box on screen is one element from the tree, and one tag in your code.

Hover or tap any line, node or box to see the same element in all three stages.