web/html-tags-how-angle-brackets-become-a-tree-in-your-browser.md

HTML tags: how angle brackets become a tree in your browser

The web · 13 min read ·

Every web page is plain text with labels in angle brackets: HTML tags. An opening tag, some content and a closing tag make an element, and attributes like href add settings.

Tags nest inside each other, and there's one golden rule: close them in the reverse order you opened them. The browser reads all of it and builds a tree called the DOM, quietly repairing your mistakes along the way, sometimes in surprising ways.

Try it in a live editor with a tree view, then spot the broken nesting yourself.

$ ls web/

see all →
web/cors-why-a-browser-blocks-a-request-your-server-happily-answered.md CORS: why a browser blocks a request your server happily answered You call your own API from a web page and the browser says blocked by CORS policy, even though the address works in a new tab. The server… 5 min read · 29 Oct web/flexbox-how-a-row-of-boxes-decides-who-gets-the-leftover-space.md Flexbox: how a row of boxes decides who gets the leftover space Put three boxes in a row and the browser decides, by a short fixed recipe, who gets the extra room and who gives some up. Learn the three… 6 min read · 26 Oct web/css-specificity-why-your-style-is-ignored.md CSS specificity: why your style is ignored You write a style, reload the page, and the text is still the old colour. Nothing is broken: another rule is winning, and CSS decides with… 7 min read · 22 Oct web/the-dom-how-a-browser-turns-html-text-into-a-tree.md The DOM: how a browser turns HTML text into a tree A web page starts as plain text, yet a script can add a bullet to it while it is open. How? The browser never works on your text directly… 6 min read · 19 Oct web/cookies-how-a-website-remembers-you-between-requests.md Cookies: how a website remembers you between requests The web forgets you after every request, so how does a site know you are still logged in? With a cookie: a small name and value the server… 4 min read · 16 Oct web/event-bubbling-why-clicking-a-button-also-clicks-its-parent.md Event bubbling: why clicking a button also clicks its parent You click a button inside a div, and both click handlers run. Why does the parent hear about something that happened to its child? Every… 5 min read · 13 Oct