HTML Minifier

What this minifier actually does

This is a deliberately simple minifier. When you click Minify, your HTML goes through three text replacements in your browser, in this order:

1. Every HTML comment, from <!-- to the next -->, is deleted.
2. Every run of whitespace (spaces, tabs, and line breaks) is replaced with a single space.
3. Any whitespace between a > and the next < is removed, so tags sit directly against each other.

The result is trimmed and shown in the right editor. The line above the editors reports the input size, the output size, and the bytes saved. There is no HTML parser involved: the tool does not understand which tags are which. That makes it fast and predictable, and it also explains every limitation described below. Read those before you run it on a full page.

Example: a product card template

Input, indented the way it would be in a template file:

<!-- Product card -->
<div class="card">
  <h3 class="card-title">Mechanical Keyboard</h3>
  <p class="price">
    <span class="currency">$</span><span class="amount">89</span>
  </p>
  <a class="btn" href="/cart/add/1042">Add to cart</a>
</div>

Output:

<div class="card"><h3 class="card-title">Mechanical Keyboard</h3><p class="price"><span class="currency">$</span><span class="amount">89</span></p><a class="btn" href="/cart/add/1042">Add to cart</a></div>

The comment is gone and the indentation is removed: 245 bytes become 205, a 16% saving. For markup like this, which is made of block elements and has no scripts or preformatted text, the output renders exactly like the input.

Where regex minification breaks HTML

1. Inline scripts with // comments

<script>
  // track clicks
  document.addEventListener('click', track);
</script>

becomes

<script> // track clicks document.addEventListener('click', track); </script>

Now the whole line is a comment and the event listener is never added. The browser shows no error, the code simply does not run. Remove line comments or rewrite them as /* track clicks */. Better, move large scripts into a .js file and minify them with a real JavaScript minifier. The same problem applies to JavaScript that relies on line breaks instead of semicolons.

2. Spaces between inline elements

<p>Signed in as <strong>ada</strong> <em>(admin)</em></p>

becomes

<p>Signed in as <strong>ada</strong><em>(admin)</em></p>

The page now reads "ada(admin)". Two buttons or links separated by a space get pushed together in the same way. Put the space inside an element (<strong>ada </strong>) or use  , which the minifier does not touch.

3. Preformatted text

Code samples in <pre> and default text in <textarea> lose their line breaks and indentation, because whitespace is collapsed everywhere. A multi-line code sample ends up on one line.

4. Conditional and special comments

Old Internet Explorer conditional comments (<!--[if IE]>...<![endif]-->) and their contents are deleted, along with any comment a CMS or build tool uses as a marker. A string inside a script that contains <!-- and --> is also cut out, because the tool cannot tell it apart from a real comment.

Is it worth minifying HTML?

Less than people expect. Most servers compress HTML with gzip or Brotli, and compression removes most of the cost of repeated whitespace. Minifying still helps with large, heavily indented pages, inline HTML stored in a database, or snippets pasted into systems with a size limit. For whole-site builds, a minifier integrated into your build step that parses the HTML is safer than any regex-based tool, this one included.

A safe way to use this tool: minify fragments made of plain markup, check the result in a browser, and keep the original formatted file as your source. The input editor keeps a copy in your browser's local storage, which is restored on your next visit until you click Clear.

When to use a different tool

• To turn minified HTML back into readable, indented markup, use the HTML Beautifier.
• To minify the code from your <script> tags, use the JavaScript Minifier, which parses the code with Terser instead of using text replacement.
• To minify stylesheets, use the CSS Minifier.

Frequently asked questions

Why did my inline JavaScript stop working after minifying?

The minifier joins all lines into one. If a script uses a // line comment, everything after that comment on the joined line is treated as part of the comment, including the rest of your code. Remove // comments or switch them to /* */ before minifying, or move the script to its own file and minify it with a JavaScript minifier.

Why are two words stuck together after minifying?

Whitespace between a closing tag and the next opening tag is removed. When two inline elements are separated only by a space, such as two links or a bold word followed by an italic word, that space is lost and the words render touching. Move the space inside one of the elements, or add a non-breaking space entity.

Does the minifier keep the formatting inside pre and textarea?

No. Every run of whitespace, including line breaks and indentation inside pre, textarea, and code blocks, is collapsed to a single space. Minify the parts of the page that do not contain preformatted text, or paste those blocks back in afterwards.

How much smaller will my HTML get?

It depends on how much indentation, line breaks, and comments the file has. Heavily indented templates shrink the most. The line above the editors shows the input size, output size, and bytes saved after each run. If your server already sends HTML with gzip or Brotli compression, the saving on the wire is much smaller than the raw number suggests.

Is my HTML uploaded anywhere?

No. Minification is three text replacements that run in your browser. The input is kept in your browser's local storage so it is restored on your next visit, and Clear removes it. Import URL fetches the file directly from your browser.