HTML Minifier

How it works

Paste the HTML of a page or an email template into the left panel and the minified version appears on the right. First the indentation and line breaks go: whitespace between block tags (div, p, li, tr) is removed completely and runs of spaces inside text shrink to one. A single space between two inline elements is kept, because in a sentence like Everything is <strong>20%</strong> off that space is visible on the page. <!-- ... --> comments are removed; conditional comments written for old Internet Explorer (<!--[if IE]>) stay even with this setting. Extra spaces inside tags are cleaned up, but attribute quotes are never removed. CSS inside <style> and JavaScript inside <script> are minified too, and application/ld+json structured data is collapsed to one line. A script that cannot be read is left exactly as it was and counted in the result line. Content inside <pre> and <textarea> is never touched. The result line reports how many bytes the file went from and to, how many comments were removed and how many blocks were minified.

This tool is also known as html minifier, minify html, html minify online, compress html, html compressor, remove whitespace from html.

What is HTML minification?

HTML minification removes the characters that exist only for the developer, such as indentation, line breaks and comments, while the page renders exactly the same. How much you save depends on the page: deeply indented, heavily commented templates gain the most. Often the biggest saving comes from the CSS and JavaScript embedded in the page, which this tool compresses with dedicated minifiers.

What is Conditional comment?

A conditional comment is a special HTML comment written as <!--[if IE]> ... <![endif]--> whose content only old versions of Internet Explorer, and Word-based Outlook, read and apply. Every other browser treats it as an ordinary comment and skips it. It is rare on websites today but still common in email templates for Outlook fixes, which is why a minifier must not remove it.

Why conservative minification?

Whitespace in HTML is not always meaningless. The space between two inline elements (John <b>Smith</b>) is visible; remove it and the words run together. Indentation inside <pre> is part of a code sample or a poem. So this tool only removes whitespace that certainly cannot change the page: between block tags and repeated spaces inside text. A non-breaking space (&nbsp;) is not treated as whitespace and stays.

Some things aggressive minifiers do are skipped on purpose: attribute quotes stay (no class=card), closing tags are not dropped and empty attributes are not shortened. Those tricks save a few hundred bytes more but break some template engines and email clients. One caveat: whitespace between list items laid out side by side with CSS (display: inline-block) is removed too; if your menu relies on that gap, set the spacing with a CSS margin instead.

Which setting for which job

Email template: remove comments and minify the embedded code. Some email clients, Gmail among them, clip messages above a certain size, and minifying helps keep a template under that limit. Conditional comments can be needed for Outlook, so the tool keeps them automatically.

When to keep comments: when the page uses a library that works with comments, such as Knockout, or when comments are markers for a content management system. When to leave <style>/<script> untouched: when a script carries template placeholders such as {{ }}; a minifier may take them for JavaScript and fail to read them. If you only want to read the code, the HTML formatter works in the opposite direction.

Frequently asked questions

How do I minify HTML?

Paste the code into the left panel on this page. The right panel shows it without comments and needless whitespace, with the CSS and JavaScript inside compressed as well. Copy it or download it as an .html file; the result line shows how many bytes you saved.

Can minifying HTML break the layout?

This tool only removes whitespace that cannot change how the page looks: between block tags and repeated spaces in text. A single space between inline elements, and everything inside <pre> and <textarea>, is kept. The one exception is list items placed side by side with CSS: the whitespace between them is removed, so give them a CSS margin.

Why were my <!--[if IE]> comments kept?

Those are conditional comments: old Internet Explorer and some Outlook versions read them and run the code inside. Removing them could break the layout in those clients, so the tool keeps them with every setting.

Is my code sent to a server?

No. Minification, including the CSS and JavaScript minifiers, runs entirely inside your browser; your HTML never leaves this page.