HTML Minifier & Beautifier

Worked Examples

Before minify

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- page metadata -->
    <title>Hello</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>Some <strong>bold</strong> text.</p>
  </body>
</html>

After minify

<!doctype html><html lang="en"><head>  <title>Hello</title> </head> <body> <h1>Hello World</h1> <p>Some <strong>bold</strong> text.</p> </body></html>

Status bar: Minified — 200 B → 150 B (−25.0%). The comment is gone and each run of indentation became one space. The spaces between tags stay because the tool keeps every whitespace-only text node as a single space: in <p>Hello <strong>world</strong>!</p> the space before <strong> is visible, and the tool does not try to decide which spaces are safe to drop. Build-time minifiers such as html-minifier-terser remove more with options like collapseWhitespace.

What Gets Minified

• Whitespace between tags (inter-tag whitespace) is collapsed.
• HTML comments are removed — except IE conditional comments (<!—[if IE]>).
• Boolean attribute values like disabled="" are simplified to disabled.
• Whitespace runs in text collapse to a single space. Whitespace-only text between tags becomes one space; it is not removed, because the parser cannot tell which of those spaces are visible.
• When a block element such as <p> or <h1> contains only text, the leading and trailing whitespace of that text is removed. Inline elements such as <strong>, <a> or <span> keep one space at each edge, because that space is visible: <strong>Note: </strong>read this. stays as it is.

What Stays Verbatim

• Content inside <script>, <style>, <pre>, <textarea>, <code>, <samp>, <kbd>.
• Attribute values, including quoted whitespace and inline event handlers.
• The <!DOCTYPE> declaration.

When to Minify Production HTML

Most modern build pipelines minify HTML as part of the bundler step (Vite, Webpack, Astro, Next.js). Use this tool when you need a one-off minify — pasting from a CMS export, comparing before/after sizes, or sanity-checking a hand-written template. Beautify is the daily driver: paste minified HTML from production, get a readable copy to debug or diff.

Limits

• Inline elements keep a collapsed space at their edges even where CSS would hide it, for example at the start of a line. The tool does not read your CSS, so it cannot tell when display or white-space changes how spaces render.
• Only HTML whitespace (space, tab, line feed, form feed, carriage return) is collapsed. Non-breaking spaces are kept: Price:  10 EUR comes out with the same three non-breaking spaces, written as the character U+00A0 instead of  . The full-width space U+3000 is also kept.
• In a fragment, content that the HTML parser moves out of <body> is written back in its original order: a conditional comment such as <!—[if mso]> before the first element, and <title>, <meta>, <link> or <style> before the body content. Ordinary comments are removed wherever they are.
• Inline JavaScript and CSS are copied as they are. They are not minified.
• The HTML is parsed by the browser’s DOMParser, so invalid markup comes out repaired (missing end tags added, stray tags dropped), and the doctype is written as <!doctype html>.