Web Analytics

 HTML Structure Viewer

Paste HTML and instantly view its structure as a visual tree. The HTML Structure Viewer shows how every element is nested inside its parent, including ids, classes, links, images and short text snippets, so you can understand the HTML hierarchy of a page or fragment at a glance. Everything runs in your browser and your HTML is never executed or uploaded.

Paste HTML above and click View Structure to see the element tree.

⭐ HTML Structure Viewer - Explanation & examples

The HTML Structure Viewer turns any piece of HTML into a clear, expandable tree. Paste a complete page, a fragment, or a copied section of markup and you immediately see the HTML hierarchy: which elements exist, how they are nested inside each other, and which ids, classes, links and images they carry. It is an inspection tool only - your HTML is parsed safely, never executed, and never modified.

🔎 What is an HTML structure?

HTML is a nested language. Every element sits inside a parent element, and can contain child elements of its own. Together these parent-child relationships form the HTML structure, also called the HTML tree or HTML hierarchy. A typical page starts with html, which contains head and body, and the body contains sections such as header, main and footer, each with their own children.

🔎 What does the HTML Structure Viewer do?

  • Parses your HTML client-side and builds a tree of all elements.
  • Shows the element name on every line, with indentation and connecting lines that make the nesting obvious.
  • Adds the most useful attributes directly after the element: #id, .class, [href], [src], [alt] and [name].
  • Displays short text snippets beneath elements so you can recognise headings and paragraphs.
  • Lets you expand and collapse individual branches, or the whole tree at once.
  • Copies the visible tree as plain text for documentation, tickets, or notes.

⚙️ Example

Input HTML:

<body>
  <header>
    <nav><a href="/contact">Contact</a></nav>
  </header>
  <main class="container">
    <h1>Welcome to our website</h1>
    <section id="about">
      <img src="image.jpg" alt="Team">
    </section>
  </main>
</body>

HTML tree output:

html
└── body
    ├── header
    │   └── nav
    │       └── a[href="/contact"]
    │           └── Contact
    └── main.container
        ├── h1
        │   └── Welcome to our website
        └── section#about
            └── img[src="image.jpg"][alt="Team"]

🔎 How HTML elements are nested

Nesting means that one element is placed completely inside another. In the example above, the a element is nested inside nav, which is nested inside header. The depth of an element is the number of ancestors it has. The Depth value in the summary shows the deepest level in your HTML, which is a quick indicator of how complex the markup is.

✅ Why view the HTML hierarchy?

  • Understand unfamiliar markup - see the overall layout of a page or template before editing it.
  • Debug layout and CSS problems - check whether an element is really inside the container you think it is.
  • Write better selectors - ids and classes are shown in the tree, so CSS and JavaScript selectors are easy to derive.
  • Review semantic structure - verify that header, main, nav and footer are used and nested sensibly.
  • Explain HTML to others - copy the tree as text and paste it into documentation or a code review.

🔎 HTML structure vs. the browser DOM

The HTML structure is what your source code describes. The DOM (Document Object Model) is the live tree the browser builds from that source, after applying parsing rules, running JavaScript, and loading resources. Browser developer tools show the DOM, which can differ from your source because scripts add or remove elements. This HTML Structure Viewer shows the structure of the HTML you paste, without executing scripts or loading external content, so what you see reflects your markup rather than the runtime HTML DOM structure.

⚠️ Notes and limitations

  • Everything runs in your browser. Your HTML is never uploaded and never executed.
  • The tool does not clean, format, or repair HTML. Incomplete or malformed markup is parsed on a best-effort basis so you still get a usable tree.
  • Only a small set of attributes is shown to keep the tree readable. Long attribute values and text are truncated.
  • Text inside script and style elements is not displayed.
  • HTML comments are not shown in the structure.

This tool is also known as

  • html structure viewer
  • view html structure online
  • html tree viewer
  • html hierarchy visualizer
  • html dom structure viewer

Frequently Asked Questions

The HTML Structure Viewer is a free online tool that shows the structure of your HTML as a visual tree. Paste HTML and see how every element is nested, together with ids, classes, links, image sources and short text snippets.

Paste the HTML into the input field and click View Structure. The tool builds an expandable HTML tree that you can browse by clicking on elements, or expand and collapse completely with the Expand All and Collapse All buttons.

Both. You can paste a complete HTML document, a fragment such as a single section, or any copied part of a page. Fragments are shown starting at their own top-level elements, without adding an html or body wrapper.

The HTML Structure Viewer uses the browser's own HTML parser, which is very tolerant. Unclosed or misplaced tags are handled on a best-effort basis so you still get a readable structure instead of an error message.

To keep the tree easy to read, only the most useful attributes are displayed: id as #id, class as .class, and href, src, alt and name in square brackets. Other attributes are left out on purpose.

Yes. Meaningful text inside elements such as headings, paragraphs and links is shown as a short snippet beneath the element. Long text is truncated so the HTML hierarchy stays easy to scan.

Elements is the total number of HTML elements found. Unique elements is the number of different tag names used, for example div, p and a. Depth is the maximum nesting level, which indicates how deeply elements are nested.

Yes. Click Copy Structure to copy the currently visible tree as plain text with connecting lines. Collapsed branches are copied as a single line with the number of hidden children, so you can control how detailed the copied structure is.

No. All processing runs client-side in your browser. The HTML is parsed as inert data, scripts are never executed, external images and styles are never loaded, and nothing is sent to a server.

No. It is purely an inspection tool. It does not format, minify, repair or otherwise modify your HTML. If you need to clean or beautify markup, use the HTML formatter or the clean code tools on this site.

The HTML structure is what your source code describes. The DOM is the live tree the browser creates from that source after running scripts and loading resources. This tool shows the structure of the HTML you paste, not the runtime DOM shown in browser developer tools.

Developer tools inspect a live page and can be overwhelming. The HTML Structure Viewer answers one simple question, what is the structure of this HTML, for any snippet you paste, with a clean tree that is easy to read and copy.

Our web tools

General
Generate
HTML entities
Text to HTML
Clean code
URL
  • URL cleaner
    Clean, normalize, and sanitize URLs in bulk — remove UTM, fbclid, gclid and other tracking parameters
  • URL parser
    Parse URL structure, query values, tracking parameters, and generate a clean URL
Web colors
Compress
Encoding & decoding
Extract