Format HTML so its structure is obvious

Formatting is about seeing the tree. When you paste HTML into this page, each element is placed on its own line and indented one level deeper than its parent, which makes it easy to check that a wrapper div really contains what you think it does. It is a quick way to inspect markup copied from a browser inspector, a template engine's output or an API response that returns HTML strings.

Using the formatter

1. Type or paste code into the HTML Source Code area. The line counter above the editor updates as you go, and Load Sample gives you a tiny page to experiment with.
2. Choose 2 Spaces or 4 Spaces from the Indentation selector. Unlike some sibling tools, there is no 8-space option here.
3. Press Structure & Format HTML. The result appears under Formatted Output.
4. Use Copy to put it on your clipboard, or Download to save pro-formatted.html.
5. Check Render Preview beneath the code to confirm the page still displays as expected.

How the formatting behaves

The tool hands your input to the browser's DOM parser and then prints the resulting tree. This has a few practical consequences worth knowing:

• A full document with an html tag comes back complete, including head and body. A fragment comes back as just its body contents.
• Broken nesting is normalised by the parser, so what you see is how a browser interprets your code.
• Attributes are output in double quotes, and br, img, hr, input, link and meta are written as self-closing tags.
• Comments are dropped, and each text run is trimmed and placed on its own line.

Typical situations

• Inspecting a widget snippet from a third-party provider to see which wrapper elements it adds.
• Normalising indentation before pasting a block into a shared repository so reviewers see fewer whitespace differences.
• Checking whether an HTML string returned by an API contains the elements you expect.
• Cleaning up a page you saved with a browser's save-as option before editing by hand.

Limits and cautions

Formatting is done with JavaScript in your browser, so the size you can process depends on your device. The output is meant for reading and editing, not for production delivery, and it will not preserve the exact whitespace inside pre or textarea elements. If you want the opposite, a compact one-line version, use a minifier instead. The render frame executes the markup you paste, including any scripts, so treat unknown code with care. If a result looks different from what you typed, remember the parser may have moved or closed elements to make the document valid.

Related Tools

• Add Line Breaks
• Add Prefix
• Add Suffix
• Add Watermark