HTML Beautifier
Pretty-print minified or messy HTML with proper tag indentation.
Enter some HTML on the left to see the result here.
What is HTML Beautifier?
An HTML beautifier takes minified, machine-generated, or otherwise messy markup and re-emits it with consistent line breaks and nested indentation, so the tag hierarchy — what's inside what — becomes obvious at a glance instead of buried in one long line. This is invaluable when you're inspecting a page's source, debugging a template that renders HTML as a single string, or reviewing output from a build tool or CMS that strips whitespace for production. This tool works entirely in your browser: it tokenizes the markup into tags and text, tracks nesting depth with a simple stack, and reports a clear error if it finds a closing tag that doesn't match — all without sending your markup anywhere.
How to Use HTML Beautifier
- Paste your HTML into the input box.
- The formatted, indented result appears instantly on the right.
- If a tag is unclosed or mismatched, the input box shows exactly which one instead of a blank or garbled result.
- Click "Copy" to grab the formatted output.
Examples
Minified markup
Input: <div><p>hello</p></div>
Output: <div> <p> hello </p> </div>
Void element
Input: <div><img src="a.png"><p>text</p></div>
Output: <div> <img src="a.png"> <p> text </p> </div>
Common Mistakes
- Pasting an HTML fragment that's missing a closing tag and expecting a full result — the tool will tell you which tag is unclosed instead of guessing how to close it for you.
- Assuming reformatted <script>/<style> content means the JS or CSS itself gets prettified too — it doesn't, only the surrounding markup structure is reformatted.
- Expecting attribute values to be reformatted or reordered — attributes are left exactly as typed inside their tag.
- Pasting a full HTML document and expecting comments or the DOCTYPE to be stripped — they're preserved, just indented in place, since beautifying isn't the same operation as minifying.
Why Use This Tool
- Processes entirely client-side — nothing you paste is sent to a server.
- Correctly skips over <script>/<style> bodies instead of corrupting them.
- Void elements are handled correctly, so indentation doesn't drift after a <br> or <img>.
- Points at the specific mismatched or unclosed tag on error, instead of failing silently.