How to Format HTML Online
Paste your HTML
Drop minified, copied, or machine-generated HTML into the input area on the left. Full documents and loose fragments both work, and no doctype is required. All processing runs in your browser, so the markup stays on your device.
Pick your indent style
Use the Indent dropdown to choose 2 spaces, 4 spaces, or a tab character. Each level of nesting is offset using that unit, while inline tags such as span, a, strong, and em stay on the same line as their text instead of being pushed down a level.
Format, review, and copy
Click Format HTML to produce indented, line-broken output on the right. A status line confirms success. Use the Copy button to send the result to your clipboard, or Clear to reset both panes and start over.
How Different Tag Types Are Handled
The formatter classifies each tag before deciding whether to increase the indent level. Block elements open a new nesting level, while inline, void, and self-closing tags stay flat. This table shows how the common cases behave.
| Tag type | Examples | Adds indent level | Behavior |
|---|---|---|---|
| Block element | div, section, ul, table, p | Yes | Children are indented one level deeper under the open tag. |
| Inline element | span, a, strong, em, code | No | Kept on the same line as surrounding content, not pushed deeper. |
| Void element | br, img, input, meta, link, hr | No | Written on its own line with no expected closing tag. |
| Self-closing tag | SVG nodes ending in /> | No | Treated as complete, so no extra closing indent is added. |
| Text and template syntax | plain text, {{ }}, | No | Preserved as-is at the current level; only HTML tags drive indentation. |
| Embedded script or style | script, style blocks | Yes (tag only) | Tags are indented but the JS or CSS inside is left untouched. |
When to Use the HTML Formatter
Reading minified markup
When you paste a single unreadable line from a build output or a copied page, formatting adds line breaks and indentation so you can follow the document structure at a glance.
Debugging nesting issues
Indentation makes mismatched or misplaced tags obvious. Seeing each level offset helps you spot where a container was left open or closed in the wrong place.
Cleaning generated HTML
Output from CMS editors, email builders, and exporters is often inconsistent. The formatter normalizes indentation to your chosen 2-space, 4-space, or tab convention.
Working with private templates
Because formatting happens entirely in the browser, you can tidy proprietary templates or internal tooling markup without sending anything to a server.
Common Problems and Fixes
Embedded CSS or JavaScript is not indented
This is expected. The formatter indents the script and style tags but preserves their contents exactly as written. To reformat the inner code, use a dedicated JavaScript or CSS formatter on those blocks separately.
Output looks wrong with unclosed tags
The indenter assumes well-formed markup. A missing closing tag can shift everything below it deeper than expected. Close the open element in your source, then format again to restore correct nesting.
Template tags broke the layout
Tags like {{ value }} or PHP blocks are treated as plain text, not HTML, so they sit at the current level instead of opening a new one. The surrounding HTML still formats correctly around them.
Nothing happens after pasting
You must click the Format HTML button to run the tool; it does not format on paste. If the input is empty or only whitespace, the output stays blank. Add content and click the button again.