What this HTML formatter does
When you copy a page’s source, export an email template, or save the HTML that some tool spits out, it usually arrives minified: everything crammed onto one endless line with no breaks or indentation. The browser is happy with it, but a human can’t read or review it. This formatter rewrites that same HTML into a tidy block, with one tag per line and two spaces of indentation for every level of nesting.
Everything happens inside your browser with JavaScript. There is no server, nothing is uploaded, and the HTML is never executed: the text is simply rearranged so it becomes readable. You can paste internal templates, emails with customer data, or private snippets and none of it leaves your screen.
How to use it
- Paste your HTML into the input box (or press Load example to see a demo).
- The beautified version appears instantly below; there is no button to press.
- Press Copy to send the formatted HTML to your clipboard.
- Use Clear to empty the box and start over.
The indentation rules it applies
The formatter walks through the HTML, splitting it into pieces (opening tags, closing tags, text, comments, and the DOCTYPE), then decides indentation with a few simple, predictable rules.
| Element | What the formatter does |
|---|---|
Opening block tag (<div>, <ul>, <body>) | Moves to a new line and increases indentation one level |
Closing tag (</div>) | Decreases indentation one level and lines up with its opener |
Void tags (br, img, input, meta, link, hr) | Treated as self-closing: they get a line but do not open indentation |
Simple <tag>text</tag> | Stays on a single line (<li>One</li>) |
script, style, pre, textarea | Their contents are kept verbatim, never re-indented |
Indentation is 2 spaces per level. An element that holds only text, such as <title>Demo</title>, is left on one line so the output does not balloon. Characters that were already escaped (&, <) are preserved untouched.
Worked example
We start from this minified document, written as one continuous line:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Demo</title></head><body><h1>Hi</h1><p>Text</p></body></html>The formatter turns it into:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<h1>Hi</h1>
<p>Text</p>
</body>
</html>Look at the result: <html> opens the first level, so <head> and <body> sit indented by two spaces. Inside <head>, the void <meta> tag takes a line without opening indentation, while <title>Demo</title> fits on one line because it only holds text. When </head> appears, indentation drops back one level so <body> lines up. The tag tree is identical to the original: only the whitespace and line breaks changed.
Your HTML stays in the browser
Nothing is sent to any server and no history is stored. Formatting is pure local text processing, which matters when a template contains internal links, email addresses, or embedded data. Close the tab and no trace is left behind.
Frequently asked questions
Does it change what the browser renders?
No. The formatter only adds line breaks and indentation between tags; it never deletes or reorders elements or attributes. The document tree is the same, so the page renders identically. The one practical exception is whitespace in loose text, which is collapsed to a single space (the browser already treats it that way outside pre).
Why doesn’t it indent the contents of script or style?
Because this is an HTML formatter, not a JavaScript or CSS formatter. Re-indenting the code inside script, style, pre, or textarea could break string literals, regular expressions, or significant whitespace. To stay safe, that content is copied exactly as you wrote it, and only the surrounding tag is adjusted.
What happens with void tags like <br> or <img>?
They are treated as self-closing. Each gets its own line at the current indentation level, but it does not open a new level, because it has no closing tag. It does not matter whether you write <br> or <br/>: the tool keeps whichever form you used.
Does it work on malformed or incomplete HTML?
It does its best without breaking. If a closing tag is missing, the indentation of the following lines may drift, but the tool never throws an error or loses your text. For flawless output, start from well-balanced HTML; even so, a stray fragment is formatted without trouble.
Can I reverse the process and minify again?
This formatter only beautifies. Since it does not alter the structure, removing the extra breaks and spaces between tags later gives you HTML equivalent to what you started with. For that inverse step use a minifier; the tag tree stays intact in both directions.