HTML Minify — Compress and Reduce HTML Size Online

🔒 Runs in your browser — nothing is sent to a server

HTML minify any pretty-printed or hand-formatted HTML into the smallest valid representation in a single click. Paste a server-rendered page, a marketing email, a Tailwind component or any HTML blob, and this HTML minifier strips whitespace between block tags, removes comments by default, shortens attribute quotes where safe and normalises boolean attributes to bare names. `<pre>`, `<textarea>`, `<script>`, `<style>` and conditional comments are preserved verbatim; mixed-content elements keep their significant whitespace. Output stats show how many bytes you saved. Everything runs 100% inside your browser; your input never leaves your device.

Two-pane view: input and output side by side
Copied!

When to use an HTML minifier

You reach for an HTML minifier any time an HTML document needs to travel across a constrained channel: a server-rendered page where every kilobyte counts toward CDN bills and Lighthouse scores, an email template hitting an ESP with a per-message size cap, an inline `srcdoc` for an iframe, an offline-cached static asset, or an admin export being attached to a ticket. Browser-local minification means the payload never touches a server during the transform — important when the HTML carries CSRF tokens, internal URLs, customer PII or signed snippets you would rather not leak to a remote tool.

How HTML minifying works under the hood

HTML minifying is a three-step pipeline. First the input is scanned for the DOCTYPE; it is preserved verbatim because many email clients and parsers refuse to render documents without it. Second the input is fed through `new DOMParser().parseFromString(input, "text/html")`; the HTML parser is lenient, so almost any input parses. Third a recursive tree walker re-emits every element compactly: whitespace between block siblings is dropped, multi-space runs in text are collapsed to single spaces, attribute quotes vanish where safe, boolean attributes are shortened to bare names, and comments are removed unless "Keep comments" is ticked. `<pre>`, `<textarea>`, `<script>`, `<style>`, mixed-content elements and conditional comments stay exactly as they were. Optional toggles add inline-CSS minification, optional-closing-tag removal and default-attribute stripping.

Examples

Input
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Hello</title>
  </head>
  <body>
    <h1>Atlas</h1>
    <p>Welcome to <strong>free-converter.online</strong>.</p>
  </body>
</html>
Output
<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><title>Hello</title></head><body><h1>Atlas</h1><p>Welcome to <strong>free-converter.online</strong>.</p></body></html>
HTML minify — pretty-printed document into one line
Input
<section class="card">
  <h2>Products</h2>
  <ul>
    <li>Atlas <em>(new)</em></li>
    <li>Vesper</li>
  </ul>
</section>
Output
<section class=card><h2>Products</h2><ul><li>Atlas <em>(new)</em></li><li>Vesper</li></ul></section>
Compress HTML — list with mixed inline content preserved
Input
<article data-tool="html minify">
  <h1>html minifier online</h1>
  <p>Compress HTML inside your browser.</p>
</article>
Output
<article data-tool="html minify"><h1>html minifier online</h1><p>Compress HTML inside your browser.</p></article>
Remove whitespace HTML — payload that names the tool itself
Input
<div>
  <!-- production banner -->
  <pre>  if (a < b) {
    x = 1;
  }</pre>
  <script>const y = 2;</script>
</div>
Output
<div><pre>  if (a &lt; b) {
    x = 1;
  }</pre><script>const y = 2;</script></div>
HTML minifier — comment stripped, script and pre preserved

FAQ

How do I minify an HTML document?

Paste the formatted or hand-written HTML into the input above and click Minify. The HTML minifier parses your input through the browser's native `DOMParser`, walks the document tree and re-emits every element with no whitespace between block tags. Comments are stripped by default, attribute quotes are dropped where safe, and boolean attributes collapse to their bare form.

What is HTML minification?

HTML minification rewrites an HTML document with every byte of optional whitespace between block tags removed, comments stripped, redundant attribute quotes dropped, and boolean attributes shortened. The DOM tree and the rendered output are unchanged: every element, attribute, text node and script body stays exactly as it was. Minified HTML renders identically to the original in any browser.

Why should I compress HTML before sending it over the network?

Minified HTML is typically 20–35% smaller than its pretty-printed equivalent — line breaks, indentation and comments inflate every server-rendered page, every email and every static asset. Stripping that overhead cuts CDN egress, lowers mobile data costs and improves time-to-first-byte. Gzip on top of minified HTML compounds the saving further. The output stats show your exact byte savings.

Will the HTML minifier break <pre>, <script> or <style> blocks?

No. The minifier treats `<pre>`, `<textarea>`, `<script>` and `<style>` as preserve-content tags. Their inner content — including all whitespace, line breaks and indentation — is emitted byte-for-byte. This keeps preformatted code blocks readable, leaves embedded JavaScript untouched, and avoids breaking carefully laid-out `<textarea>` defaults. Optional inline-CSS minification is opt-in and applies only to `<style>` blocks and `style="…"` attributes.

How does the minifier handle attribute quotes?

Quote-safe attribute values — values without spaces, quotes, `=`, `<`, `>` or backticks — are emitted unquoted: `class="btn"` becomes `class=btn`. Values that contain any of those characters keep their double quotes. Boolean attributes (`disabled`, `checked`, `required`, `selected`, `readonly`) collapse to the bare attribute name regardless of input form. The result is the smallest valid HTML representation.

How is HTML minify different from HTML beautify?

HTML minify and HTML beautify are exact opposites. Minify strips whitespace between tags, removes comments and shortens attribute quotes to produce the smallest valid HTML for transport or storage. Beautify adds line breaks and indentation back so a human can read the document. The DOM tree is identical in both directions; only the cosmetic whitespace and the attribute-quote noise differ.

Are conditional comments preserved?

Yes. `<!--[if IE]> … <![endif]-->` conditional comments are always preserved, even when the default "remove comments" behaviour is in force. They were the IE-specific way to gate legacy stylesheet links and shims; stripping one would change the rendered page in older Outlook clients and IE-targeted email templates. Plain `<!-- comment -->` annotations are stripped unless "Keep comments" is ticked.

Is it safe to paste sensitive HTML into this minifier?

Yes — the HTML minifier runs entirely in your browser using the native `DOMParser` and a tree walker written in plain TypeScript. Your input and the minified output stay on your machine; nothing is uploaded, logged or cached. Safe for marketing emails, admin pages, server-rendered components carrying CSRF tokens and any HTML you would not want a remote service touching.

Glossary

HTML (HyperText Markup Language)

HTML is the standard markup language of the web, defined by the WHATWG HTML Living Standard. Pages, emails, server-rendered components and email templates all ship as HTML. An HTML minifier removes optional whitespace, comments and redundant attribute quotes from any valid HTML document without altering the rendered output.

HTML minifier

An HTML minifier is any tool or function that strips optional whitespace between tags, removes comments, drops redundant attribute quotes and emits the smallest valid representation of an HTML document. Browser `DOMParser` plus a custom tree walker, command-line `html-minifier-terser` and build-time webpack plugins all qualify. Browser-local minifiers keep secrets in admin HTML or email templates off remote servers.

Inter-tag whitespace

Inter-tag whitespace is the line breaks and indentation between sibling block elements — for example the newline and four spaces between two `<li>` items in a pretty-printed list. The browser ignores it when rendering, so a minifier can drop every byte of it. Whitespace inside text nodes or inside `<pre>` / `<textarea>` is significant and is not touched.

Quote-safe attribute value

A quote-safe HTML attribute value is one that does not need surrounding double quotes — short, single-token values without spaces, double quotes, `=`, `<`, `>` or backticks. `class="btn"` is quote-safe; `class="btn primary"` is not. The HTML5 spec accepts unquoted attribute values when they are quote-safe, and stripping the quotes saves two bytes per attribute.

Boolean attribute

A boolean HTML attribute is an attribute whose mere presence enables a behaviour — `disabled`, `checked`, `required`, `selected`, `readonly`, `autoplay`, `controls`, `loop`, `multiple`, `open`, `hidden`. The HTML5 spec accepts three forms (`disabled`, `disabled=""`, `disabled="disabled"`); the canonical and shortest is the bare name. A modern HTML minifier always normalises to that form.

Conditional comment

A conditional comment — `<!--[if IE]> … <![endif]-->` — is an Internet Explorer-specific extension that targeted IE 5–9 with version-gated markup. Although IE is gone, the construct still appears in legacy pages and Outlook email templates that rely on it for fallback stylesheets. A safe HTML minifier always preserves conditional comments, even when stripping ordinary `<!-- … -->` annotations.

Related tools