How to use the DOM Tree Visualizer
- 1. Paste HTMLAny snippet or full page.
- 2. Build the treeThe browser parses it exactly as it would a real page.
- 3. ExploreOpen and close branches and read the element stats.
What the DOM is
When a browser loads HTML, it turns the text into the Document Object Model: a tree where every element is a node with a parent, children and siblings. JavaScript and CSS work on this tree, not on your original text. That is why document.querySelector and CSS selectors use words like child and descendant.
The tree shows element names in orange, IDs (#) in blue, classes (.) in green, other attribute names in grey, and text in quotes. Whitespace-only text between tags is hidden to keep the tree readable.
Worked example
The sample has a header with a nav of two links, and a main with a heading, a paragraph containing <strong>, and a list. The tool reports 14 elements: html, head and body (added by the browser), header, nav, 2 a, main, h1, p, strong, ul, and 2 li. The deepest nesting is 4 levels below <html>: html → body → header → nav → a.
Notice that the browser adds <head> and <body> even though the sample never writes them. Browsers also repair broken HTML in their own way; for example, a <div> inside a <p> ends the paragraph early. Seeing the tree shows you what the browser actually built, which explains many "why doesn't my CSS apply" moments.
Frequently asked questions
Do scripts in my HTML run?
No. The HTML is parsed into a separate document that never runs scripts.
Why do <html>, <head> and <body> appear?
Browsers always create them, even if your HTML leaves them out.
Can I edit the tree?
This tool is for viewing. Edit your HTML and rebuild the tree to see changes.
Is it free?
Yes, completely free. Building your first tree asks for your name and WhatsApp number once; after that every Uncodemy tool works straight away.