HTML Minifier — Compress HTML in Your Browser

The HTML Minifier strips the characters a browser reads and then throws away: comments, indentation, line breaks, the spaces between tags, and the quotes around attribute values that HTML5 does not require. What comes out renders identically and is smaller — typically 10–30% smaller for hand-written markup, more if the file is heavily commented.

It runs in a small JavaScript function in your browser. Your markup never reaches a server. The input and output panels sit side by side so you can eyeball the result, and the stats bar shows the exact byte difference rather than a percentage you have to take on trust.

Before the whitespace pass runs, the contents of every <pre> and <textarea> block are pulled out and put back afterwards untouched. Those two elements are whitespace-significant — collapsing indentation inside them visibly changes the page — and this is the failure most quick minifier scripts have.

This is the deployment counterpart to the HTML Beautifier: develop against readable markup, ship the compressed version. If you have a build pipeline, Vite or your bundler should be doing this automatically. This tool is for the cases where you don't — a single template, a static page, an email body.

With the three default options on, this markup:

<!-- page header --> <div class="header"> <h1 id="title">Hello</h1> <p>Some <strong>bold</strong> text.</p> </div>

comes out as:

<div class=header><h1 id=title>Hello</h1><p>Some <strong>bold</strong> text.</p></div>

Note what survived: the single space before <strong> and after </strong>. Those are inside a text run, where a space is visible output, so the whitespace pass leaves them alone. Only the newline-plus-indent between block tags is removed. A minifier that collapses inline spacing too will silently glue words together.

Three options are on by default because they are safe on essentially any valid HTML. Two are off by default because they are not.

Remove HTML comments (on by default — safe). Strips <!-- ... --> blocks. Legacy IE conditional comments, which start <!--[if, are matched separately and kept, because they change what a browser renders rather than merely annotating it.

Collapse whitespace (on by default — safe). Strips leading indentation on each line, reduces runs of spaces to one, and removes newlines between a closing and an opening tag. Spaces inside text runs are preserved, and <pre>/<textarea> are protected. Usually the single biggest contributor to the saving.

Remove optional attribute quotes (on by default — safe on markup). HTML5 allows an unquoted attribute value when it has no spaces or special characters, so class="nav" becomes class=nav. The pass only fires on values made up of letters, digits, hyphens, and underscores, so URLs, inline styles, and multi-word values keep their quotes. See the caveat below about combining this with the inline-JS option.

Minify inline CSS (off by default — check the output). Applies CSS minification inside <style> blocks: comments out, whitespace collapsed around { } : ; , > ~ +, trailing semicolons dropped. It is a regex pass with no CSS parser behind it, so a string value that itself contains one of those characters — a content: "a; b" declaration, say — can be mangled. Rare, but check the output.

Minify inline JS (off by default — read the warning below). Strips comments and collapses whitespace inside <script> blocks. This is the option with real teeth, and the next section explains exactly how it can bite.

The inline JavaScript pass is a set of regular expressions, not a parser, and it has two failure modes you should know about before you enable it. They are both off-by-default for this reason, and no minifier that works this way can avoid them.

1. It removes everything after // on a line — including inside strings. A script containing fetch("https://api.example.com/v1") will come out as fetch("https:, because the comment-stripping regex has no idea it is inside a string literal. Any protocol-relative URL, regex literal containing a slash pair, or string with a double slash in it is at risk.

2. It turns every newline into a space. JavaScript that relies on automatic semicolon insertion — statements ending in a line break rather than a ; — will be concatenated onto one line and stop working. Code that terminates every statement with a semicolon is unaffected.

There is also an interaction worth knowing: the attribute-quote pass runs after the inline-JS pass and operates on the whole document, so a JavaScript assignment written without spaces, like const mode="dark";, can have its quotes stripped once the JS has been flattened. Written with spaces around the =, which is the normal style, it is untouched.

The practical advice: leave both inline options off for anything you have not read the output of. For production JavaScript, run Terser or your bundler's minifier, which parse the code properly, and use this tool for the markup around it.

Will strip: HTML comments (except IE conditionals), leading indentation, line breaks between tags, runs of spaces, and the optional quotes around simple attribute values. Optionally, comments and whitespace inside <style> and <script> blocks.

Won't change: tag names, attribute names, attribute values, element order, or the DOM the browser builds. Spaces inside text runs stay, and <pre>/<textarea> content is put back byte-for-byte.

Won't fix: unclosed tags, invalid nesting, duplicate IDs, or missing attributes. The minifier assumes your HTML is already valid — it makes it smaller, not correct. Run it through the W3C validator first if you are unsure.

Won't do: remove unused markup, inline external CSS, defer scripts, shorten class names, or compress images. Those are build-tool jobs, and they change behaviour rather than just bytes.

Worth knowing before you measure the win: if your host serves HTML with gzip or brotli — most do; check the Content-Encoding response header — the number in the stats bar overstates what actually goes over the wire. Compression already eliminates most repeated whitespace, so minification on top of it typically adds 5–15%, not the 20–30% the uncompressed comparison suggests. Still worth doing, especially since HTML is the render-blocking first byte of every page load, but the honest figure is the smaller one.