HTML Minifier

1. Comments are removed, except old Internet Explorer conditional comments, whose text begins with [if, which are kept.
2. Whitespace between two tags is deleted. Any run of spaces, tabs or line breaks between a > and the next < disappears.
3. Any run of two or more whitespace characters becomes one space, wherever it is. A single line break on its own is left alone.

The sample on the page shrinks from 89 to 60 characters:

Nothing else changes. Attribute quotes, optional closing tags, inline CSS and inline JavaScript are kept exactly as written, apart from the whitespace rules above. The result updates as you type or paste.

Rule 2 removes the space between inline elements, and browsers render that space. <strong>Total:</strong> <em>42</em> becomes <strong>Total:</strong><em>42</em>, which displays as Total:42. The same happens to links, icons and buttons placed side by side.

After minifying, scan the rendered page for words glued together. Where you find one, move the space inside a tag, as in <strong>Total: </strong>, or use   between the elements. Both survive minifying.

Rule 3 doesn't skip any element, so it reaches inside blocks where whitespace matters:

• <pre> and <textarea>: indentation collapses. A code sample with a line indented by four spaces loses the indent and joins the line before it.
• Inline <script> with // comments: an indented line break counts as two or more whitespace characters, so the next line is pulled onto the comment line. var a = 1; // set a followed by var b = 2; becomes one line, and var b = 2; is now part of the comment.
• Comment-based markup: comments used as data, such as block markers some CMS editors store in post content, are deleted along with ordinary comments.

If your page has any of these, move scripts into external files, or minify only the template parts that don't contain them.