📄 HTML Minifier - Compress and optimize HTML code

📄
Characters: {{ htmlInput.length }}
⚙️
🔧
⚡
📤
{{ result.minified }}
Characters: {{ result.minifiedSize }}
📊
Original Size:
{{ result.originalSize.toLocaleString() }} chars
Minified Size:
{{ result.minifiedSize.toLocaleString() }} chars
Savings:
{{ result.savings.toLocaleString() }} chars
Compression:
{{ result.compressionRatio }}%
Compression Ratio
💾
Original: ~{{ Math.round(result.originalSize / 1024 * 100) / 100 }} KB
Minified: ~{{ Math.round(result.minifiedSize / 1024 * 100) / 100 }} KB
Saved: ~{{ Math.round((result.originalSize - result.minifiedSize) / 1024 * 100) / 100 }} KB
💾
⚠️ {{ error }}

ℹ️ About HTML Minifier

HTML minification reduces markup size by removing characters that browsers do not need to build the same document structure, such as comments, extra spacing between tags, and safe whitespace around syntax characters. Use it before deploying static pages, server-rendered fragments, email templates, or copied HTML snippets where byte size and transfer time matter.

This tool can remove HTML comments, collapse whitespace between elements, compact simple inline style attribute declarations, compact embedded <script> blocks, remove empty elements when requested, and remove quotes from simple attribute values where the HTML syntax allows it. It reports the original size, minified size, saved characters, and compression percentage so you can compare output before using it in production.

Example: <div class="card"> <h2> Title </h2> </div> can become <div class=card><h2> Title </h2></div> when whitespace and safe attribute quote removal are enabled. Larger templates usually save more when they contain indentation, comments, and repeated spacing.

  • Production builds: minify generated HTML after templates, includes, and translations have been rendered.
  • Static snippets: compress embeds, landing-page sections, documentation examples, or email markup before publishing.
  • Performance checks: compare byte savings before gzip or Brotli so you know how much raw HTML changed.
  • Cleanup: remove development comments and formatting from copied markup while keeping a readable source copy elsewhere.

Limits: HTML whitespace can be meaningful in <pre>, <textarea>, inline text, templating delimiters, and scripts or styles that contain string literals. Test minified output in the browser before deploying, keep the original source for maintenance, and avoid aggressive options on markup that depends on exact text spacing or empty placeholder elements.

The relevant source rules are the WHATWG HTML syntax for comments, tag omission, attributes, and unquoted attribute values, plus MDN's notes on whitespace handling and the <pre> element.

API Usage Example:

POST /api/tools/webdev/html-minifier
Content-Type: application/json

{
    "html": "<!DOCTYPE html><html><head><title>Example</title></head><body><!-- comment --><p>Hello World!</p></body></html>",
    "removeComments": true,
    "removeWhitespace": true,
    "removeEmptyElements": false,
    "removeQuotes": false,
    "collapseInlineTagWhitespace": true,
    "preserveLineBreaks": false,
    "removeOptionalTags": false,
    "minifyInlineCSS": true,
    "minifyInlineJS": true
}
Ready