Minify HTML

How to use it#

1. Drop an .html file on the box, or paste the markup into it.
2. Choose how whitespace is treated, and which extras to remove.
3. Check the sizes, then copy the result or download it as a .min.html file.

What minifying HTML takes out#

Minifying HTML, also called compressing it, saves mostly whitespace: the indentation and line breaks that make markup readable. Comments go next, apart from conditional comments for old Internet Explorer, server-side include comments starting <!--#, and comments starting <!--!, which are kept on the assumption that they are there on purpose. The CSS in each style tag and style attribute is minified with clean-css, and the JavaScript in each script tag and event handler attribute, such as onclick, with terser.

Two extras are off at first, because each makes the markup harder to read and work with. Drop optional tags and quotes leaves out the closing tags HTML lets you omit, such as </li> and </p>, along with attribute quotes where they are not needed and the value of attributes such as disabled="disabled". Remove default attributes drops ones that only say what the browser assumes anyway, such as type="text" on an input and method="get" on a form. Together they are worth a percent or two.

To go the other way, and make a minified page readable again, paste it into the HTML formatter, which indents it and the CSS and JavaScript inside.

The whitespace a page depends on#

Some of the whitespace in HTML shows on the page. A space between two inline elements is drawn, so <b>one</b> <b>two</b> needs its space. The default keeps one space wherever there was any, which leaves every gap the page shows, and turns runs of spaces and line breaks into that single space. Pre and textarea elements are left exactly as written.

Also remove it around block tags takes the space out between elements such as div and li as well, where a browser normally shows none. It saves a little more, and it closes the gaps in a row of items that CSS has set to display: inline-block, such as a menu built from a list. Use it when you know the layout does not rely on them.

The minifier reads the markup, not the stylesheet, so it cannot know that CSS has given some element white-space: pre. Choose Leave it as written for a page like that, and the rest of the minifying still runs.

The CSS and JavaScript inside#

Script tags are minified as classic scripts, type="module" ones included, so the names they define at the top level keep their spelling, since another script on the page may use them. A script that does not parse is left unminified, and so is a script tag holding data rather than code, such as JSON-LD. For a standalone file, the JavaScript minifier offers more control, with module support and a choice about comments.

The CSS minifier predates CSS nesting, and it silently deletes a rule written inside another rule, along with the rules after it. A page whose CSS uses nesting, or has a brace left open, keeps its CSS as written, and a line under the sizes says so. The markup and scripts are minified as usual. An @import in the CSS stays an @import and is never fetched.