How to Minify HTML Without Breaking Your Page
By Tools Star Hub Editorial Team · Published
Quick answer: paste your markup into the HTML Minifier and press Minify. It deletes HTML comments, squeezes runs of spaces, tabs and line breaks inside tags and text down to a single space, and drops whitespace-only gaps between tags that contain a line break. The contents of pre, textarea, script and style blocks are copied exactly as written. The result appears next to your source with before and after character counts and the percentage saved, ready to copy.
Hand-written and template-generated HTML is full of indentation, blank lines and developer comments. Browsers ignore most of it, but every character is still downloaded. Minifying trims that weight from pages, email templates and HTML snippets, and it hides notes you never meant visitors to read in the page source.
What does it mean to minify HTML?
Minifying means rewriting code so it does exactly the same job with fewer characters. For HTML, most of the savings come from whitespace that only exists to make the source readable: indentation before each tag, line breaks between elements, and spaces lined up inside long attribute lists.
It is not the same as compression. Servers usually compress pages with gzip or Brotli on the way to the browser, and that already shrinks repeated whitespace very well. Minifying happens before that step and makes the uncompressed file smaller too, which helps with parsing, cache size and any place where compression is not applied, such as some inline snippets and email bodies.
What exactly does this minifier change?
The tool reads your markup one piece at a time and applies a short, predictable set of rules. Knowing them makes it easy to predict the output.
| Part of the markup | What happens |
|---|---|
| Comments such as <!-- note --> | Removed completely |
| Spaces and line breaks inside a tag | Collapsed to one space, and removed before the closing > or /> |
| Quoted attribute values | Kept exactly, including any spaces inside the quotes |
| Text between tags | Runs of whitespace become one space |
| Whitespace-only gaps that contain a line break | Removed |
| Contents of pre, textarea, script and style | Copied unchanged |
Tag names, attribute order, quotes and entities are not rewritten, and nothing is added. The output is also trimmed at the start and end.
Why are pre, textarea, script and style left alone?
In a pre element or a textarea, whitespace is part of the content. Collapsing it would change how code samples, poems or default form text look. Script and style blocks contain JavaScript and CSS, where line breaks and spacing can matter and where HTML rules do not apply.
So the minifier copies everything between the opening tag and its matching closing tag as it is. If you want those inline scripts or styles smaller too, run them separately through the JavaScript Minifier or the CSS Minifier and paste the results back in.
Can minifying change how my page looks?
It can in one specific case. When two inline elements, such as links, buttons or spans, sit on separate lines with nothing but whitespace between them, the browser normally shows a small space there. The minifier removes whitespace-only gaps that include a line break, so those elements may end up touching.
The fix is simple. Put a real space or a character between them on the same line, or control the gap with CSS margin or a flex gap instead of relying on source formatting. Block elements such as div, p and section are not affected, because their layout does not depend on that whitespace.
Conditional comments for very old versions of Internet Explorer are also comments, so they are removed. Few sites still need them, but check before minifying legacy templates.
How much smaller will my HTML get?
It depends on how the source was written. Deeply indented templates and pages with many comments shrink noticeably, while markup that is already compact barely changes. The tool shows the character count before and after and the reduction as a percentage, so you can see the real effect on your own file instead of guessing.
The counts are characters, not bytes. For plain English markup they are nearly the same, but text in other scripts can take more than one byte per character once saved, so the byte saving can differ slightly.
When should I minify HTML, and when not?
Minify the copy you publish, not the copy you edit. Keep the readable source in your project or version control and minify as a final step, whether by hand with this tool or in a build process. Minified HTML is hard to review and almost impossible to diff line by line.
It is most useful for static pages, landing pages, HTML email templates, embed snippets and widgets that you paste into another system. If your site already runs a framework build that minifies output, running it again here adds little.
How do I check that the minified HTML still works?
Open the original and minified versions side by side in a browser and compare them, paying attention to spacing between inline links, buttons and icons. Test any forms, since textarea defaults should be unchanged. Run your inline scripts and check the browser console for errors.
Remember that the minifier does not validate HTML. If the source has an unclosed quote or a missing closing tag, the output will carry the same problem. Fix the source first, then minify again.
Is there a size limit, and is my code uploaded?
The tool accepts up to 400,000 characters at a time, which keeps the browser tab responsive. That is enough for most single pages and templates. The work happens in your browser, so the markup is not sent to a server, which matters when you are working on unreleased pages or internal tools.
How to minify HTML online
- Paste your HTML. Paste a full document or a fragment into the HTML source box. Press Example to load a short sample with a comment and a pre block.
- Press Minify. The minified markup appears in the output box, with the before and after character counts and the reduction.
- Review the output. Check that inline elements still have the spacing you expect and that protected blocks look the same.
- Copy and publish. Use Copy to place the result on your clipboard, then paste it into your file, CMS or email platform. Clear resets both boxes.
Example
A template full of comments
A page header with indented navigation and several <!-- section --> notes is minified. The comments disappear, the indentation goes, and the links stay in the same order with the same attributes.
A code sample in a pre block
A tutorial page has a pre element with indented code. Everything around it is collapsed, but the lines inside the pre block keep their exact spacing, so the sample still reads correctly.
Two buttons on separate lines
Two inline buttons sat on separate lines and showed a small gap. After minifying they touch. Adding a CSS gap on their container restores the spacing without depending on whitespace.
Tips and limitations
Keep the original
Minifying is one-way in practice. Save the readable version and treat the minified copy as a build output.
Inline CSS and JavaScript
Style and script contents are not minified here. Use the matching tools for those blocks.
Not a validator
Broken markup stays broken. The tool assumes the HTML is already correct.
Escaping is different
If you need to show HTML as text on a page, you need escaping, not minifying. The HTML Encoder does that.
FAQ
- Does the HTML Minifier remove comments?
- Yes. Every <!-- ... --> comment is removed, including conditional comments used by very old Internet Explorer versions.
- Will it change the content of pre or textarea tags?
- No. Text inside pre and textarea, and code inside script and style, is copied exactly as written.
- Does it minify inline CSS and JavaScript?
- No. Script and style contents are left untouched. Minify them separately with the CSS Minifier and JavaScript Minifier.
- Why are my links touching after minifying?
- Whitespace-only gaps containing a line break are removed. Add a space on the same line or use CSS spacing between inline elements.
- Does it remove quotes from attributes or optional closing tags?
- No. Attributes, quotes and tags are kept as written. Only whitespace inside tags is tidied.
- Are spaces inside attribute values kept?
- Yes. Anything inside single or double quotes, such as a class list or an alt text, is copied without change.
- Is the reduction measured in bytes?
- It is measured in characters. For most English markup that is close to bytes, but it can differ for other scripts.
- What is the maximum input size?
- Up to 400,000 characters per run. Split very large files or minify them in a build process.
- Is minifying HTML still worth it with gzip?
- The gain is smaller once a server compresses pages, but it still trims the uncompressed file and removes comments you do not want public.
- Is my HTML uploaded anywhere?
- No. The markup is processed in your browser tab and is not sent to Tools Star Hub.
- Should I minify server-rendered templates or static output?
- Prefer minifying the final HTML response or build output so template logic stays readable.
- Can minification affect accessibility attributes?
- Valid attributes remain; avoid aggressive optional-tag removal if your tooling is unsure.
- How do conditional IE comments behave?
- Legacy conditional comments are uncommon now; many minifiers strip ordinary comments including them.
- Is pretty-printed HTML bad for SEO?
- Search engines care about content, not indentation; minify for speed, not ranking tricks.
- Will it reorder my attributes?
- Most simple minifiers only remove whitespace; attribute order usually stays the same.
- Can I minify email HTML?
- Be careful—email clients are fragile. Test thoroughly or use an email-safe minifier profile.
- Does removing whitespace break inline SVG?
- SVG can be sensitive to spaces in text nodes; preview rendered output after minifying.
- Should JSON-LD script blocks be minified?
- You can compact JSON inside script tags, but keep it valid JSON so rich results still parse.
- How do I compare before-and-after sizes fairly?
- Compare UTF-8 byte lengths of the full documents, then re-check transferred size with compression on.
- Can HTML minification replace image optimization?
- No—it only shrinks markup. Compress media separately for real gains.
Trim your markup with the free HTML Minifier.
For stylesheets, use the CSS Minifier.
For scripts, try the JavaScript Minifier.