HTML Formatter
Pretty-print messy HTML with clean indentation or minify it to a single line for production.
Tidy up copied or generated HTML with a forgiving pretty-printer that understands void elements like <img> and <br>, keeps inline elements such as <b>text</b> on one line, and never re-indents <script> or <style> bodies so embedded code is not altered. Minify mode strips comments and collapses whitespace for deployment.
How to use this calculator
- Paste your HTML into the input box.
- Choose Pretty print for readable indented markup, or Minify for a compact single line.
- Click Format.
- Review the output — void elements stay self-contained and scripts are untouched.
- Copy the result into your editor or deploy pipeline.
The formula
The markup is scanned into tags, text, comments, and doctype tokens; a stack tracks nesting with forgiveness for stray closers; each token is re-emitted with two spaces of indentation per open element, with short inline elements kept on one line.
Worked example
Pasting <div><p>Hello <b>world</b></p><img src="a.png"><br></div> and choosing Pretty print yields seven lines: <div> at the top level, <p> indented once, the greeting text and inline <b>world</b> further in, and the void <img> and <br> elements on their own lines.
Frequently Asked Questions
Why is this formatter 'forgiving'?
Real-world HTML is rarely strict: tags are left unclosed, void elements appear without slashes, and nesting is imperfect. Instead of erroring like an XML validator would, this formatter does its best with what it gets — stray closing tags are kept in place and indentation follows the tags that do nest properly.
How are void elements handled?
Elements that can never have children in HTML — img, br, hr, input, meta, link, and others — are recognized and never given a closing tag or extra indentation level. Self-closing syntax like <br/> is also accepted and normalized consistently.
Is my JavaScript inside <script> tags safe?
Yes. Script and style bodies are passed through byte-for-byte; the formatter does not re-indent or otherwise touch their contents. That avoids the classic bug where a formatter breaks code containing < or > characters inside strings.
What does minify mode remove?
Minify strips HTML comments and collapses all whitespace between tags into nothing, producing a compact single-line document. Text content inside elements keeps single spaces so words do not run together. It does not minify inline CSS or JS — use the dedicated formatters for those.
Does any data leave my browser?
No. Formatting runs entirely client-side, so markup containing internal URLs, tokens, or draft content never touches a server.