HTML Formatter Beautify / Minify

Paste messy HTML and instantly beautify it with clean indentation, or minify it for production. Void-element aware, preserves <pre>, <script>, and <style> content, and runs entirely in your browser.

Input HTML 0 chars · 0 lines
Output 0 chars · 0 lines · 0%
Ready.

About HTML Formatting

HTML looks simple but is deceptively hard to format correctly. Unlike JSON or YAML, HTML has rules that the formatter has to respect or it will silently break the document.

Void elements

Tags like <br>, <img>, <input>, <meta>, <link>, and <hr> cannot have closing tags. A naive formatter that assumes every opening tag needs a </tag> will produce invalid HTML. This tool knows the full list of void elements and handles them correctly. You can pick HTML5 style (<br>) or XHTML self-closing (<br/>).

Whitespace-sensitive content

Inside <pre> and <textarea>, every space, tab, and newline is meaningful — collapsing them changes what the user sees. The formatter leaves the content of these tags untouched in both Beautify and Minify modes.

<script> and <style> blocks

The content of <script> and <style> tags is not HTML — it's JavaScript and CSS. Re-indenting it with an HTML formatter would mangle it. These blocks are preserved as-is. If you need to format JS or CSS, use the dedicated JS Minifier or CSS Minifier.

Minification trade-offs

Removing optional closing tags (</li>, </p>, </td>) can save bytes, but some older tooling and email clients don't handle it well. That option is off by default. Unquoting attributes is similar — valid per HTML5, but disabled by default because edge cases (spaces, equals signs, quotes inside the value) can break downstream parsers.

Frequently Asked Questions

Does this HTML formatter modify my content?

No. Beautify only adjusts whitespace and indentation. Minify removes whitespace, comments, and optional tags, but never changes attribute values, text content, or the DOM structure your HTML describes.

Will it format content inside <script> and <style> tags?

The contents of <script>, <style>, <pre>, and <textarea> are preserved as-is in both Beautify and Minify modes. Formatting JavaScript or CSS would require a dedicated parser for each language — use our JS Minifier or CSS Minifier instead.

What are "void elements" and why do they matter?

Void elements like <br>, <img>, <input>, <meta>, and <hr> cannot have closing tags in HTML5. The formatter is aware of these and will not try to close them. You can choose XHTML-style self-closing (<br/>) or plain HTML5 (<br>) via the Self-Closing Void option.

How much can minification actually reduce file size?

Typical savings on hand-written HTML range from 15% to 40%, depending on indentation style, comment volume, and use of optional closing tags. Savings on already-minified HTML from build tools will be minimal.

Is my HTML sent to a server?

No. All parsing, beautifying, and minifying runs entirely in your browser with JavaScript. Nothing is uploaded, logged, or stored. You can disconnect from the internet after the page loads and the tool still works.

Related Tools

Copied!