Developer Tools

HTML Formatter and Minifier

This tool reindents HTML for reading and compresses it for shipping. HTML minification is deceptively risky, because whitespace matters in some places and not others: inside a pre or textarea it is content, and between two inline elements it is a word separator. Collapsing it everywhere is what turns "bold italic" into "bolditalic".

Runs entirely in your browser — nothing you paste is uploaded.

Mode

Reindent so the structure is readable.

Indent

Input

Formatted

How to

How to use the HTML Formatter

1
Paste your HTML
Type, paste, or load an .html file. The output updates as you type.
2
Choose beautify or minify
Beautify indents the tree so the structure is readable. Minify collapses formatting whitespace while protecting the elements where it is content.
3
Decide about comments
Comments can be stripped. Conditional comments and those beginning with an exclamation mark are kept, since removing them changes behaviour.
4
Copy the result
Check the saving in the byte counts, then copy the output or download it.

Examples

HTML Formatter examples

A preformatted block

Input: <pre>line one indented </pre>
Output: <pre>line one indented </pre>

Everything inside pre is displayed exactly as written, so a minifier that collapses it destroys the code sample it was showing. The element's contents are copied through untouched.

Space between inline elements

Input: bold italic
Output: bold italic

Removing that single space renders as "bolditalic". Runs of whitespace are collapsed to one space rather than deleted, which keeps the words apart.

Indentation between block elements

Input: <div> hi </div>
Output: <div> hi </div>

Here the whitespace is only formatting, so it collapses to a single space. That is safe between block elements and unsafe between inline ones, which is why the distinction is made.

Why use it

What the HTML Formatter gives you

Whitespace-sensitive elements protected

The contents of pre, textarea, script and style are copied through byte for byte, so code samples and scripts survive minification.

Words stay apart

Whitespace runs collapse to one space rather than vanishing, so text either side of a tag boundary does not run together.

Attributes left alone

Quoted attribute values are never rewritten, so a class list or an alt text containing multiple spaces stays as written.

Runs offline

Formatting happens in your browser, so markup containing customer data or unreleased copy is not uploaded.

Good to know

HTML Formatter limitations

Whitespace handling depends on CSS, so an element set to display:inline by a stylesheet is not detected as inline by the minifier.
Attribute quotes are not removed and boolean attributes are not shortened, both of which a dedicated build tool would do.
Malformed markup is passed through rather than repaired, since browsers each recover differently.
Embedded script and style contents are preserved but not themselves minified — use the JavaScript or CSS tool for that.

Summary

HTML Formatter in short

pre, textarea, script and style contents survive minification exactly.
Whitespace collapses to a single space rather than being deleted, keeping words apart.
Conditional comments are kept because removing them changes behaviour.
Attribute values are never rewritten.
Everything runs in your browser.

FAQ

HTML Formatter questions

Why does minifying HTML sometimes ruin code samples?

Because the contents of a pre element are displayed exactly as written, and most minifiers collapse whitespace across the whole document. The indentation that made the sample readable disappears and every line runs together.

Why keep a space between two tags?

Between inline elements that space is a word separator. Deleting the space in bold italic renders as bolditalic. Collapsing runs to one space is the safe compromise.

Which comments are kept?

Conditional comments beginning <!--[if and those starting <!--! are preserved, because both are load-bearing — the first targets old Internet Explorer and the second is the convention for a comment that must survive.

Are attribute values changed?

Never. A class attribute with awkward spacing, or an alt text with a double space, is copied through exactly. Rewriting attribute values is how minifiers break things in ways nobody notices until production.

How much does HTML minification save?

Usually 10 to 20 percent on hand-written markup, and much less on generated output that is already compact. Gzip compresses repeated whitespace very effectively, so the real-world gain over the wire is smaller than the byte count suggests.

Does it minify the JavaScript inside a script tag?

No. Script contents are preserved exactly rather than being passed through a second minifier, which would risk corrupting them. Minify the script separately and paste the result back in.

What happens with unclosed tags?

The markup is passed through as written. Browsers each have their own recovery rules for malformed HTML, so a formatter that silently restructured your document could easily change how it renders.

Can I format template files with handlebars or JSX syntax?

The minifier will not corrupt the template expressions, since it only recognises tags and text. The beautifier is built for plain HTML, so unusual template syntax may not indent the way you would like.

Is my markup sent to a server?

No. Everything runs in the page, which matters because HTML pasted into a formatter often contains real customer names, addresses or order details from a rendered page.

Discover

Related developer tools

CSS FormatterBeautify or minify CSS in your browser. Keeps url() values and content strings intact instead of mangling them.JavaScript FormatterBeautify or minify JavaScript in your browser. The minifier understands strings and regex, so URLs and template literals survive intact.XML FormatterFormat, minify and validate XML in your browser. Preserves CDATA and text content, and reports errors with a line number.JSON ViewerFormat, validate and explore JSON in your browser. Reports the line and column of an error and flags numbers too large to survive.