About the HTML Minifier
What is an HTML minifier?
An HTML minifier removes the bytes browsers ignore: indentation, line breaks between block elements, comments, and attribute quotes that the HTML5 spec says you don't need. The result is a smaller file that parses into exactly the same DOM. What makes minifying HTML tricky — and what this tool is careful about — is that some whitespace is visible: the space between two links is real text, and everything inside <pre>, <textarea>, and your scripts must stay byte-for-byte intact.
This minifier understands that difference. It drops whitespace at block boundaries where the browser wouldn't render it, keeps the single spaces that separate inline content like links and bold text, and never touches raw elements. It can also unquote attribute values when the spec allows it (class="box" becomes class=box, but title="two words" keeps its quotes) and compress the CSS inside your <style> blocks with a structure-aware CSS minifier. Everything runs in your browser — no CDN, no upload.
How to Use This Tool
- Add your HTML. Paste it into the left editor, click Open file, or hit Sample to try it.
- Pick your optimizations. Attribute unquoting and inline CSS minification are on by default; flip Keep comments if you need license or template markers preserved.
- Watch the size drop. The chips above the output show before and after byte counts and the percentage saved.
- Take the result. Copy it or download
index.min.html. Switch the mode to Beautify anytime to go the other way.
Common Use Cases
- Shipping smaller pages: Minify landing pages and email templates where every kilobyte affects load time.
- Embedding HTML in code: Compact markup before inlining it into a JavaScript string or a server-side template.
- Cleaning generated output: Strip the noisy comments and indentation that CMS exports and site builders leave behind.
- Preparing widgets: Shrink embeddable snippets so they paste cleanly into third-party dashboards with size limits.
Working on markup structure instead? The HTML Formatter beautifies with the same rendering-safe engine, the HTML Viewer previews your markup live, and the HTML Compare tool diffs two documents. Or browse all our free developer tools.
Frequently Asked Questions
Will minifying change how my page looks?
No. The minifier is inline-aware: whitespace that the browser renders — like the space between two links or around a <b> tag — is kept as a single space, while whitespace at block boundaries is removed entirely. The DOM your visitors see is identical.
Is it safe for scripts, styles, pre and textarea?
Yes. Those elements are captured whole, so their contents are never re-wrapped or trimmed. A lone < inside a script or a hard-formatted <pre> block comes out byte-for-byte identical.
When are attribute quotes removed?
Only when the HTML5 spec allows it: the value must be non-empty and contain no spaces, quotes, equals signs, backticks, or angle brackets. Values like URLs with query strings keep their quotes, and a value right before a self-closing slash is left quoted so the slash can't merge into it.
What does "Minify inline CSS" do?
It runs the contents of every <style> element through the same structure-aware CSS minifier used by our CSS tools — comments stripped, whitespace collapsed, with strings, url(...) values, and calc() expressions left intact.
Why did my HTML only shrink a little?
Markup that's already compact, or dominated by text content and inline scripts, has less removable whitespace. The biggest wins come from deeply indented, comment-heavy templates — those often shrink 15–30%.
Is my code uploaded anywhere?
No. Minification runs entirely in your browser with self-contained JavaScript — no CDN, no server round trips, no logging. It even works offline once the page has loaded.