How to use the HTML minifier

1Paste the page into the HTML box, or press Example.
2Choose what to do: Collapse whitespace, Remove comments, Minify inline <style> and Minify inline <script> are on by default.
3Tick Remove optional end tags for a few more bytes, if your team is happy to read HTML without </li> and </td>.
4Press Minify HTML. The footer lists the size saved, the gzipped sizes and how many comments and tags were removed. Then Copy or Download.

Example

Input

<!-- navigation -->
<nav   class="top">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about/">About</a></li>
  </ul>
</nav>
<p>Hello <b>world</b>,   welcome.</p>

Output

<nav class="top"><ul><li><a href="/">Home</a></li><li><a href="/about/">About</a></li></ul></nav><p>Hello <b>world</b>, welcome.</p>

Saved 25% (175 B → 132 B); gzipped 140 B → 116 B; 1 comment removed. With Remove optional end tags ticked, both </li> tags are dropped as well.

What HTML minification removes

Comments, except Internet Explorer conditional comments (<!--[if IE]>), which some email templates still rely on.
Whitespace between block elements such as </li> and <li>, where the browser ignores it anyway.
Runs of spaces and line breaks inside text, collapsed to one space, which is how the browser displays them.
Extra spaces inside tags: <nav class="top" > becomes <nav class="top">.
Optional end tags (when ticked): the HTML standard lets you leave out </li>, </p> before a block, </td>, </tr>, </option>, </body> and </html>. Browsers build the same page either way.

Inline CSS and JavaScript

The contents of <style> blocks are minified with CSSO and <script> blocks with Terser, the same engines as the CSS minifier and JavaScript minifier. JSON-LD and other <script type="application/json"> blocks are compacted as JSON. Scripts of other types (templates such as text/x-template) are left alone.

If a script has a syntax error, it is kept exactly as it was and the footer tells you, rather than failing the whole page.

Whitespace that matters

Not all whitespace is decoration. A space between two inline elements is visible: <b>Hello</b> <i>world</i> must keep its space or the words run together. The minifier keeps one space wherever text or inline elements meet, and removes whitespace only next to block-level elements.

Content inside <pre> and <textarea> is never touched, since every space there is displayed. One known edge case: elements styled display: inline-block (navigation items, buttons) are spaced by the whitespace between them, and removing it between <li> tags closes those gaps. If a horizontal menu shifts after minifying, that is why.

Savings vs compression

HTML is highly repetitive, so gzip and Brotli compress it well, and the gain from minifying is smaller over the network than on disk. In the example the raw saving was 25% and the gzipped saving 17%. For server-rendered pages, enabling compression on the server is the bigger win; minifying on top of that trims what remains, and removing comments also stops internal notes from being published. Compare the effect on a whole page with the page size checker.

Is my text private?

This tool runs entirely in your browser. Your text is not uploaded to our servers.

Sources

Questions about the HTML minifier

Can minifying break my layout?

Only where whitespace between inline-block elements created visible gaps, such as menu items or buttons in a row. Fix it in CSS (flexbox with gap) rather than relying on spaces in the markup.

Should I remove optional closing tags?

It is valid HTML and saves a few bytes, but the markup gets harder to read and edit. It is reasonable for generated output, less so for files people maintain.

Is minified HTML bad for SEO?

No. Search engines parse the same document either way. Removing comments and whitespace doesn't change the text, links or structure they read.

HTML Minifier