HTML Minifier

What the minifier changes

HTML minification is mostly about whitespace and the small things around it. This page runs html-minifier-terser with a deliberately conservative set of transforms:

• Whitespace collapsing. Every run of spaces, tabs and line breaks between tags or inside text becomes a single space. It is not removed completely: with conservative collapsing, a place that had whitespace keeps one space. That matters because Hi <strong>Aisha</strong>, renders differently from Hi<strong>Aisha</strong>,, and inline elements, buttons and inline-block layouts depend on those gaps.
• Comments are removed. A comment at the very start of the input leaves one leading space behind, which is harmless.
• Boolean attributes are shortened: checked="checked", disabled="disabled" and autofocus="" all become the bare attribute name.
• Inline CSS in <style> blocks and style attributes is compressed: margin: 0px becomes margin:0, #333333 becomes #333.
• Inline JavaScript in <script> elements and event-handler attributes such as onclick is minified with Terser, which can inline constants as well as strip spaces.

On a full page with indentation, the saving is usually 10 to 25 percent; the order confirmation example drops from 645 to 533 bytes. Pages heavy with inline scripts and styles gain more.

What stays exactly as written

Several things are left alone on purpose. Content inside <pre> and <textarea> keeps every space and line break, because there whitespace is visible. Character references are not decoded, so &,   and $ stay as typed and cannot turn into markup or invisible characters by accident. Attribute values keep their quotes, optional closing tags such as </li> and </p> are not removed, and self-closing slashes like <br/> are kept, so the output still works for XHTML consumers and email clients that are picky about markup. Doctype, <head> and <body> stay in place. Attributes are not sorted and class names are not reordered, so selectors and scripts that look for an exact class value keep matching.

Skipping the riskier transforms costs a few bytes compared with aggressive settings, but it means the minified page needs no visual check: if it rendered before, it renders the same after.

Validation and workflow

The input is parsed by Prettier’s HTML parser before the minifier sees it, so an unclosed opening tag or a closing tag with no matching opener is reported with its line and column instead of producing quietly damaged output. Note that HTML’s own error recovery is generous: an unclosed <li> or <p> is valid because those end tags are optional.

Paste the HTML or open a file; the page starts in minify mode. Use Ctrl/Cmd+Shift+M to see the same input beautified, and Ctrl/Cmd+Shift+C to copy the compact version. The Preview tab renders your input in a sandbox, which helps when minifying an email template you cannot easily test elsewhere. The formatting options (Whitespace sensitivity, One attribute per line, Keep > on the last attribute line) only affect the beautified view. Templates containing customer data stay in your browser while you work.

Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Order confirmed</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0px; }
    .total { font-weight: bold; }
  </style>
</head>
<body>
  <!-- order summary -->
  <h1>Thanks, Aisha!</h1>
  <p>Your order <strong>ord_8f2k1</strong> ships   tomorrow.</p>
  <p class="total">Total: S&#36;129.90 &amp; free delivery</p>
  <input type="checkbox" checked="checked" disabled="disabled"> Email me updates
  <pre>
KB-104   x1
MS-220   x2
  </pre>
  <script>
    const orderId = "ord_8f2k1";
    console.log("Loaded order", orderId);
  </script>
</body>
</html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Order confirmed</title> <style>body{font-family:system-ui,sans-serif;margin:0}.total{font-weight:700}</style> </head> <body> <h1>Thanks, Aisha!</h1> <p>Your order <strong>ord_8f2k1</strong> ships tomorrow.</p> <p class="total">Total: S&#36;129.90 &amp; free delivery</p> <input type="checkbox" checked disabled> Email me updates <pre>
KB-104   x1
MS-220   x2
  </pre> <script>const orderId="ord_8f2k1";console.log("Loaded order",orderId)</script> </body> </html> 

<table role="presentation" width="100%">
  <tr>
    <td style="padding: 16px 24px; font-family: Arial, sans-serif; color: #333333;">
      <!-- greeting -->
      Hi <strong>Aisha</strong>,
      your refund of <b>S$39.50</b> is on its way.
    </td>
  </tr>
</table>

<table role="presentation" width="100%"> <tr> <td style="padding:16px 24px;font-family:Arial,sans-serif;color:#333"> Hi <strong>Aisha</strong>, your refund of <b>S$39.50</b> is on its way. </td> </tr> </table> 

<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input id="email" type="email" required="required" autofocus="">
  <select name="plan">
    <option value="monthly" selected="selected">Monthly</option>
    <option value="yearly">Yearly</option>
  </select>
  <button type="submit" onclick="  track( 'subscribe' );  ">Subscribe</button>
</form>

<form action="/subscribe" method="post"> <label for="email">Email</label> <input id="email" type="email" required autofocus> <select name="plan"> <option value="monthly" selected>Monthly</option> <option value="yearly">Yearly</option> </select> <button type="submit" onclick='track("subscribe")'>Subscribe</button> </form> 

Common errors and how to fix them

Related tools

• HTML formatter
• html validator
• css minifier
• javascript minifier
• svg minifier
• HTML to Markdown
• xml minifier