CodeKitHub
English
Code Tools

HTML Minifier & Formatter

Paste HTML below to either minify it — stripping comments, redundant attributes and extra whitespace — or beautify it into readable, indented markup. Both directions run entirely in your browser using a real HTML parser, not a regex hack, so content inside <pre> and <textarea> stays intact.

What Is This Tool?

An HTML minifier removes everything a browser doesn't need to render a page correctly: comments, extra whitespace between tags, redundant attributes like type="text/javascript", and optional closing slashes. The result is functionally identical HTML that downloads and parses faster.

This tool is built on html-minifier-terser, the same minifier used inside popular build tools, so it understands HTML structure rather than blindly stripping whitespace — it won't touch formatting-sensitive content inside <pre>, <textarea>, or inline <script>/<style> blocks, and it also minifies the CSS and JS embedded in your markup.

Why Use It?

  • Real parser under the hood, not regex — safe on edge cases like <pre> blocks, inline scripts, and conditional comments.
  • Minifies embedded <style> and <script> content too, not just the surrounding markup.
  • See exactly how many bytes you saved before shipping the file.
  • Format mode turns compressed, single-line HTML back into something a human can read and edit.
  • 100% local processing — your markup, and anything private in it, never leaves your browser.

How to Use

  1. Paste your HTML into the input box, or click "Load Example" to try a sample.
  2. Click "Minify" to compress it, or "Format" to beautify it with 2-space indentation.
  3. Check the message under the boxes — minify mode shows the size reduction; if the HTML can't be parsed, you'll see the exact error instead of broken output.
  4. Click "Copy" to grab the result.

Example

Input

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <!-- greeting -->
    <p class="greeting">
      Hello, world!
    </p>
  </body>
</html>

Output

<!doctype html><html><head><title>Example</title></head><body><p class="greeting">Hello, world!</p></body></html>

Comments, indentation and line breaks are removed; the doctype is shortened. The visible page renders identically.

Practical tips

  • Minify right before deployment, not during development — keep readable HTML in source control and minify only the build output.
  • If a page behaves oddly after minifying, check for JavaScript that relies on exact whitespace inside text nodes (rare, but it happens with some older widgets).
  • Formatting minified HTML from a live site is a fast way to inspect its structure before writing a scraper or debugging layout issues.
  • Combine with the CSS and JS minifiers below if your build process keeps styles and scripts in separate files.

Where this fits in real workflows

Static sites, email templates and landing pages built by hand often ship with the same indentation and comments used during development. Minifying before deploy trims a real, if modest, amount of transfer weight — and for email HTML specifically, character count sometimes affects Gmail's clipping threshold, so smaller markup has a functional benefit beyond speed.

The Format direction is just as useful in reverse: pasting a minified page from view-source and reformatting it is often the fastest way to understand a competitor's landing page structure or debug a third-party embed.

CSS Minifier · JS Minifier

Common use cases

  • Shaving bytes off a static landing page or email template before it goes live.
  • Reformatting a minified HTML snippet pulled from view-source to understand its structure.
  • Cleaning up HTML pasted from a WYSIWYG editor or CMS export, which often carries excess whitespace.
  • Quickly checking whether a hand-written HTML snippet is well-formed, since a parse failure surfaces as a clear error.

Frequently Asked Questions

Is my HTML uploaded anywhere?

No. Minification and formatting both happen locally in your browser using JavaScript. Nothing you paste is sent to a server, so it's safe to use with internal templates or unreleased pages.

Will minifying break my page?

It shouldn't — the tool uses a real HTML parser (html-minifier-terser) that understands tag structure, so it preserves whitespace-sensitive elements like <pre> and <textarea> and won't merge attributes incorrectly. Always spot-check critical pages after minifying, especially if you rely on unusual inline scripts.

Does it also minify CSS and JavaScript inside the HTML?

Yes. Inline <style> and <script> blocks are minified in place using the same engines as the dedicated CSS and JS minifier tools, so you don't have to extract them manually.

How much smaller does HTML typically get?

It depends on how much whitespace, comments and formatting the original had — hand-written HTML with lots of indentation and comments commonly shrinks 20-40%. Framework-generated HTML that's already compact will save less.

Can I convert minified HTML back to a readable format?

Yes — paste the minified HTML and click "Format" instead of "Minify" to get back properly indented, readable markup.

Related Tools