Online Tool Store
HTML Formatter
Re-indent minified or tangled HTML into readable markup, with your choice of indentation and short elements kept inline. Runs entirely in your browser.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
Example shown — replace it with your own markup.
How it works
- Paste the markup you want to read. Nothing is uploaded.
- Pick your indentation — two spaces, four, or tabs.
- The result updates as you type, with nesting depth shown by indentation.
- Copy it, or download it as an .html file.
How the indentation is worked out
The markup is split into tags and text runs, then each tag adjusts a depth counter that decides how far the line is indented:
opening tag → print at current depth, then depth + 1
closing tag → depth − 1, then print
void element → print only; depth unchanged
That last rule is the one naive formatters get wrong. Elements like <img>,
<br>, and <input> have no closing tag, so treating them as openers pushes
everything after them one level too deep and the indentation drifts further out with every image on the page.
Two other cases get special handling. <pre>, <textarea>,
<script>, and <style> hold content where whitespace is significant, so their
insides are passed through exactly as written — re-indenting a code sample would change what it displays, and
reformatting a script can break it. Comments and the doctype are copied verbatim for the same reason.
It is worth knowing what a formatter cannot do safely: whitespace between inline elements is meaningful in HTML.
Putting each <span> of a row on its own line introduces a space between them that was not there
before, which is why short inline content is collapsed onto one line rather than split.
FAQ
Is my markup sent anywhere?
No. The formatting happens in your browser as you type, so nothing is uploaded or logged. That matters when the markup is from an internal template or an unreleased page.
Will it change what my page renders?
Only whitespace between tags is added, and the tags themselves are left exactly as written. In most cases that is invisible, but be aware that whitespace between inline elements is meaningful in HTML — indenting a row of spans can introduce a space where there was none.
What happens to my <pre> and <script> blocks?
They are copied through untouched. Whitespace inside pre, textarea, script, and style is significant, so re-indenting it would change the output or break the code. Those blocks keep the line breaks you gave them.
Does it fix broken HTML?
No, and that is deliberate. It is a formatter, not a validator — unclosed and mismatched tags are passed through as they are rather than silently rearranged. If your indentation comes out looking wrong, that is usually a genuine missing closing tag showing itself.
What does "keep short elements on one line" do?
It collapses cases like a heading or a link whose entire content is short text, so you get <h2>Pricing</h2> on one line instead of three. Inline elements are always collapsed; block elements only when their text is under about 60 characters.
Can it minify instead of expanding?
No — this only goes one direction, towards readable. Minifying is a build-step concern where stripping whitespace safely needs to know which elements are inline, and getting that wrong changes rendering.
How we compare
| Feature | Online Tool Store | Upload-based formatter sites | Prettier in your editor |
|---|---|---|---|
| Your markup never leaves the page | ✓ | Varies — many post it to a server | ✓ |
| Leaves pre, script, and style untouched | ✓ | Not always | ✓ |
| Nothing to install, works on any machine | ✓ | ✓ | ✗ |
| Formats CSS, JS, and templating languages too | ✗ | Some do | ✓ |
| Wraps long lines to a print width | ✗ | Sometimes | ✓ |
Handy for markup that arrives as one long line — from a CMS export, a minified page, or a colleague's email — when you just need to read it and you would rather not paste an internal template into a random site. For formatting a whole project, Prettier in your editor is the right tool.