What is an HTML minifier?
An HTML minifier makes markup smaller by deleting characters the browser doesn't need: comments, indentation, and line breaks between tags. The page should look the same, but the file downloads faster. This minifier is deliberately simple. It works on the text with four regular expressions rather than parsing the HTML, which makes it fast and predictable but not context-aware.
How to minify HTML
- Paste your HTML into the input box. A full document or a fragment both work.
- Click Minify.
- Copy the minified result and check the risky spots listed below before you deploy it.
What it does, step by step
The minifier applies these rules in order:
| Step | Rule | Effect |
|---|---|---|
| 1 | Remove <!-- ... --> |
All comments disappear, including multi-line and conditional comments |
| 2 | Replace > + whitespace + < with >< |
Indentation and line breaks between tags go |
| 3 | Collapse 2+ whitespace characters into one space | Runs of spaces inside text and attributes shrink |
| 4 | Trim each line | Leading and trailing spaces on remaining lines are removed |
It doesn't remove optional closing tags, shorten attribute values, drop quotes around attributes, or minify the CSS and JavaScript inside <style> and <script> blocks. For stylesheets, run them through the CSS minifier separately.
Worked example
Input (160 characters):
<!-- Main navigation -->
<nav class="site-nav">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About us</a></li>
</ul>
</nav>
Output (104 characters, 35% smaller):
<nav class="site-nav"><ul><li><a href="/">Home</a></li><li><a href="/about">About us</a></li></ul></nav>
The comment is gone, the nesting whitespace is gone, and the three spaces in "About us" became one. Browsers already render runs of spaces as a single space in normal text, so that last change is invisible.
Markup to check before you publish
Because the minifier doesn't understand which elements treat whitespace as meaningful, a few kinds of HTML need care. All of these examples were run through the tool.
Inline scripts with // comments. This is the one that can break a page. The script
<script>
// comment
var a = 1;
</script>
becomes <script> // comment var a = 1; followed by the closing tag. Everything after // is now part of the comment, so var a = 1; never runs. Use /* */ comments in inline scripts, or move scripts into separate files.
Spaces between inline elements. <p><strong>Bold</strong> <em>italic</em></p> becomes <p><strong>Bold</strong><em>italic</em></p>, which renders as "Bolditalic". Rule 2 removes whitespace between any two tags, but between inline elements like <a>, <strong> and <span> that space is visible text. MDN's guide to how whitespace is handled in HTML and CSS explains when it matters.
<pre> and <textarea>. These preserve whitespace exactly (MDN on <pre>), but the minifier still collapses it, so indented code samples lose their indentation.
Attribute values and strings. title="a b" becomes title="a b", and the same happens to string literals in inline JavaScript.
If your page has none of these, the output is safe to use as-is.
Minifying vs. compressing
Minification and HTTP compression solve the same problem in different ways. A minifier deletes characters for good. Compression (gzip or Brotli, negotiated by the browser and server as described in MDN's HTTP compression guide) encodes the file in transit and restores it exactly. Compression typically saves more and has no risk of changing your markup, so turn it on first. Minify on top of it if you want the last few kilobytes, ideally as an automated build step rather than by hand.
Related tools
- CSS minifier: strips comments and whitespace from stylesheets.
- Code beautifier: the reverse, re-indenting minified HTML so you can read it.
- Code diff: compare a beautified copy of the minified output against your original to spot unexpected changes.
- HTML editor: write and preview HTML with syntax highlighting.
Last updated