Unscramble minified HTML
You pulled the source from a production page and it’s one enormous line. Every <div>, <span>, <ul>, and <li> jammed together with zero whitespace. Good for bandwidth, useless for debugging that layout bug you’re trying to fix.
Paste it here, pick your indentation (2 or 4 spaces), and the formatter nests everything properly. Each child element indented under its parent, void elements like <br> and <img> handled without messing up the indent depth, comments preserved in place, doctype kept at the top.
When it helps
WYSIWYG output. CMS editors and email builders produce notoriously messy HTML. Three levels of unnecessary wrapping divs, inconsistent spacing, tags crammed together. Formatting it reveals what’s actually going on structurally.
View source debugging. The production site renders wrong. You view source, and it’s minified. Step one: format it so you can read it. Step two: find the bug.
Code review. You’re reviewing a coworker’s template changes. Formatting both versions identically means the diff shows only real changes, not whitespace noise.
Learning. If you’re studying how a site is built, properly indented HTML makes the nesting hierarchy obvious. You can trace which elements are inside which without counting angle brackets.
It formats, it doesn’t fix
One thing to be clear about: this tool formats valid HTML. It won’t add missing closing tags, repair malformed attributes, or fix structural errors. If your HTML is broken, the formatter will do its best, but the result might look odd. For actual validation, use a dedicated HTML validator.
Partial snippets work fine, you don’t need a full <!DOCTYPE html> document. A single <div> with nested content is enough.
For compressing HTML back down for production, use the HTML Minifier. For CSS formatting, there’s the CSS Formatter.
FAQ
Self-closing tags?
Handled correctly. <br>, <img>, <input>, <hr>, <meta>, <link>, the formatter knows they’re void elements and doesn’t increase indent depth after them.
2 or 4 spaces?
Most front-end teams use 2 spaces for HTML. Keeps deeply nested structures from scrolling off screen. Use 4 if that matches your project’s conventions.
Does it send my code anywhere?
No, all client-side JavaScript. Your markup stays in your browser.