Markup CityISSUE #2 of 39

what the browser actually reads

Tagg the BuilderVSThe Unclosed Tag

Tagg the Builder saysThe browser reads your HTML text, builds a tree of objects from it (the DOM), and paints that tree to the screen.

When you open a page, the browser doesn't display your file as text — it parses it. It reads the tags, figures out which elements contain which, and builds an in-memory tree called the DOM (Document Object Model). That tree is what actually gets painted, and what JavaScript later manipulates.

This is why a missing closing tag can wreck a layout: the browser guesses where the element ends, and its guess shapes the whole tree. Clean, well-nested markup gives the parser an easy job and a predictable result.

Power-ups you unlock

Raw HTML text → parsed → DOM tree → painted pixels
The DOM is a live tree of nodes, not your original text
Bad nesting forces the parser to guess and can break layout
JavaScript reads and edits the DOM, not the source file

The Unclosed Tag attacks — common mistakes

Assuming the page shows your text literally — it shows the parsed DOM
Leaving tags unclosed and trusting the browser to recover correctly
Editing the source and expecting JS-made DOM changes to persist (they do not)

Boss battleOpen DevTools (right-click → Inspect) on the preview and expand the <body> node. Compare the tree you see to the text on the left — that tree is the DOM.

Example code

<!doctype html>
<html>
<head><meta charset="utf-8"><title>dom demo</title></head>
<body>
  <h1>open devtools</h1>
  <p>Right-click → Inspect to see the DOM tree the browser built from this text.</p>
</body>
</html>

▶ Open the interactive comic issue

‹ Welcome To The Markup Picking An Editor That Won'T Fight You ›