How to use the HTML minifier
- Paste a page or a snippet into HTML input, or press Open .html file. The result updates as you type.
- Pick the options. Remove comments keeps IE conditional comments and
<!--! -->notes. Collapse whitespace shrinks every run of spaces and line breaks to one space, and Drop spaces around block tags removes the ones a browser would not draw. - Remove blank lines deletes empty lines when whitespace is left alone. Remove optional quotes turns
class="plan"intoclass=planwhere that is safe. - Read Original, Result and Saved, then press Copy output or Download .min.html.
How the whitespace rule works
Browsers collapse any run of spaces and line breaks into one space (CSS Text Module Level 3, MDN). That single space is visible between two inline elements, so <b>Hello</b> <i>world</i> must keep it. A space next to a block tag, around <br> or at the start or end of a block is never drawn, so it can go. The tool reads your HTML with a tokenizer that follows the HTML parsing rules, so a lone < in text such as if x < y is left alone.
The content of <pre>, <textarea>, <script> and <style>, and of any element the page itself marks as preformatted, is copied byte for byte. Non-breaking spaces, both the character and , are never changed.
Worked example
The sample that loads with the page is 640 bytes. Minified with the default options it is 488 bytes, a saving of 152 bytes (23.8% smaller). The comments are gone, the title is trimmed to Pricing, class="plans featured" became class="plans featured", and the paragraph becomes <p>Pay only for what you use, <a href="/plans">see the plans</a> or <a href="/contact">contact us</a>.</p>, with the space before each link kept. The <pre> block and the <style> text are unchanged.
Limits and edge cases
- Inline-block layouts and preformatted text are recognized when the page says so itself: an inline
style, a rule in its own<style>block, or class names such aswhitespace-preandd-inline-block. A rule in an external stylesheet cannot be seen. If it makesliitems inline-block or setswhite-space: pre, turn off Drop spaces around block tags. - Remove comments also removes hydration markers such as
<!--[-->in server-rendered Vue or Svelte output. Turn it off for that kind of HTML. - It is not a validator. Broken markup passes through, and an unfinished tag at the end is kept as typed and flagged.
- Your HTML is not uploaded. To read minified HTML again, use the HTML Beautifier.
Frequently asked questions
Will minifying HTML change how my page looks?
Not with the default options on normal markup. The tool keeps one space between inline elements such as <b>, <a> and <span>, and removes only the whitespace a browser would not draw: next to block tags, around <br> and at the edges of a block. We rendered 356 pages from this site before and after minifying, at desktop and phone width, and compared the position of every element and all visible text: no differences.
Does it minify the CSS and JavaScript inside my page?
No. The content of <style> and <script> is kept exactly as you wrote it. Run those blocks through the CSS Minifier and the JavaScript Minifier first, then paste the result back.
Is removing attribute quotes safe?
Only for values made of letters, digits and the characters - _ . : # , % @ + ~, which is all the Remove optional quotes option touches. A value with a space, a quote, an equals sign or an angle bracket keeps its quotes. The option is off by default because the saving is small and some style guides require quotes.
How much smaller will my HTML get?
Hand-indented templates with comments often shrink by 15 to 30 percent. Pages that a framework already prints compactly shrink by only a few percent. The sample on this page goes from 640 bytes to 488 bytes, and the gzip estimate shows what visitors actually download.
Sources: WHATWG, HTML Standard, parsing HTML documents; W3C, CSS Text Module Level 3, white space processing; MDN Web Docs, How whitespace is handled.