How to minify HTML safely

Minifying HTML is more dangerous than minifying CSS. HTML's whitespace rules are weirder than they look, and a naïve minifier can change what your page actually looks like. The good news: with two rules in mind, you can get most of the byte savings without breaking anything.

The two whitespace rules in HTML

Rule one: most whitespace collapses. Between block-level tags, between flow content, between attributes — HTML treats every run of whitespace as a single space. So <p> Hello world </p> and <p>Hello world</p> render identically.

Rule two: some tags preserve whitespace. The big ones are <pre>, <textarea>, <script>, and <style>. Inside these, every space, tab, and newline matters. The HTML Minifier here knows to extract those regions verbatim, collapse the whitespace in everything else, then reinsert them untouched.

The combination of these two rules is the entire game. A naïve "collapse all whitespace" pass will eat the indentation inside your <pre> blocks and ruin the rendering. A "collapse only outside protected tags" pass is safe.

What you save

Hand-written HTML is roughly 20–40% smaller after minification. Most of that comes from indentation in nested blocks — every level of nesting adds 2-4 spaces per line. A heavily nested page (a long form, a complex table) saves a lot. A flat page (an article with mostly <p> tags) saves less.

After Gzip, the savings narrow to roughly 5–15% on the wire. Same story as CSS: deflate is excellent at compressing repeated whitespace, so the unminified-but-compressed version is already close to optimal.

Things the minifier does not touch

• Conditional comments. <!--[if IE]>...<![endif]--> blocks are preserved. They look like comments but they have semantic meaning on old IE.
• SSI directives. <!--#include ...-->-style directives are kept (they execute server-side).
• pre, textarea, script, style. Verbatim.
• Attribute values. No quote-stripping, no attribute-reordering. The bytes inside <...> stay the same.

If you want a real production minifier that does collapse attribute quotes, drop optional tags, and rewrite inline CSS — html-minifier-terser is the canonical npm package. The tool here is the safe subset.

A common gotcha: inline display tags

In HTML's whitespace model, inline elements DO get a single space inserted between them if there was any whitespace in the source. So:

<a>Click</a>
<span>here</span>

renders as "Click here" with a space. After minification it becomes <a>Click</a><span>here</span>, which renders as "Clickhere" — no space.

In practice this only bites you if you formatted hand-written HTML with newlines between inline tags AND you depended on the inter-tag whitespace for spacing. The fix is either inserting   deliberately or wrapping with display-block elements. Either way, render-test the minified output before shipping.