HTML Tree Viewer
Paste HTML and see its structure as a collapsible tree. Click any element to inspect its tag, attributes, and content.
What does this tool do?
Every HTML page is really a tree of nested elements — a structure browsers call the DOM (Document Object Model). This tool takes any HTML you paste in and draws that tree visually, so you can see exactly how tags are nested inside one another, instead of scanning through raw code counting opening and closing tags.
How to read the tree
Each row is one element. Click the arrow to expand or collapse its children. Click the element's name to see its full list of attributes and its exact HTML in the panel on the right, where you can also copy it with one click.
Why check your HTML structure?
A clear, well-nested structure makes pages easier to style with CSS, easier for screen readers to navigate, and easier to debug when something isn't displaying the way you expect. This tool is useful for learning HTML, reviewing a snippet before you use it, or tracking down a stray or unclosed tag.
Everything runs in your browser — nothing you paste here is uploaded or stored. Note: browsers automatically fix small mistakes (like unclosed tags) when reading HTML, so what you see here is the structure your browser would actually render.