HTML Minifier & Beautifier
Minify and beautify HTML code with advanced formatting options
Input HTML
Output HTML
Processed HTML will appear here
HTML Minifier & Beautifier
Minify and beautify HTML code with advanced formatting options
Features
- Two modes in one tool: Minify shrinks HTML for production (removes whitespace, optional comments, attribute quote redundancy) while Beautify reformats minified HTML with consistent indent and tag nesting
- HTML5 spec-aware: handles void elements (img, br, hr) correctly, preserves <pre>/<textarea>/<code> formatting (where whitespace is significant), respects <!DOCTYPE> declarations
- Configurable minification: drop comments (or keep /*! conditional), collapse whitespace between tags, shorten attribute quotes (omit when value is safe), remove default attributes (type="text", method="get")
- Beautify options: indent 2/4/8/tab, line-ending LF/CRLF/CR, attribute quote style (original/single/double), self-close void elements toggle (XHTML-style)
- Minification level: Basic (whitespace + comments) or Aggressive (additional safe optimizations like dropping optional closing tags </li>, </p>) — Aggressive valid per HTML5 spec but harder to read
- Live byte-size comparison and gzip-projected savings — same metric your CDN sees on the wire
- Error reporting includes line/column for malformed input (unclosed tags, invalid nesting); guides fixing rather than guessing
- Pure client-side: parsing and formatting run in your browser, no upload happens. Works offline once cached
How to use
- Paste your HTML into the input pane.
- Pick mode: Minify (production deployment) or Beautify (read or edit).
- For minify, choose the level (Basic or Aggressive) and toggle comment handling.
- For beautify, pick indent size, line ending (LF for Unix tools, CRLF for Windows), and attribute quote style.
- Click Process. Output pane shows the result with byte-size statistics.
- Copy or download — minified output uses .min.html or your project's convention.
Tips & Best Practices
- Run minification in your build pipeline (html-minifier-terser, htmlmin, etc.); this tool is for ad-hoc inspection.
- For email templates, use Basic mode and disable aggressive collapsing — email clients have stricter HTML parsing.
- Use beautify on legacy templates to clean them up before refactoring; pair with a diff tool to verify nothing changed structurally.
- The gzip-projected size is your real wire footprint; minification + gzip is the standard production pipeline.
- For CMS-managed HTML (WordPress, Drupal), don't minify the source — those systems regenerate HTML on save; minify the rendered output via your CDN.
FAQ
What does Aggressive mode do that Basic doesn't?
Aggressive drops optional closing tags allowed by HTML5 spec: </li>, </p>, </td>, </tr>, </option>, etc. The resulting HTML is still valid per spec and renders identically, but reads like an XML newbie's nightmare. Use Basic if humans will read the minified output (rarely); Aggressive when only the parser ever sees it.
Will minification break my inline scripts and styles?
No. The parser detects <script> and <style> tags and treats their content as opaque — no whitespace collapsing inside. If you want their content minified too, run them through JS/CSS minifiers first or use a full HTML+inline-CSS+inline-JS minifier in your build pipeline.
Why does my <pre> block lose formatting?
It shouldn't — <pre>, <textarea>, and <code> are whitespace-sensitive per spec and the minifier preserves their content. If you see formatting loss inside <pre>, file a bug; that's a regression.
Does it support Angular/Vue/React templates?
Standard HTML attributes work. Framework-specific bindings (Angular's [(ngModel)], Vue's @click, React's onClick) are treated as opaque attribute values and preserved as-is. Custom elements (web components) are recognised by the hyphen-in-name rule and treated like standard elements.
How are HTML entities handled?
Preserved. The minifier doesn't convert & to & or vice versa — both forms are valid HTML and converting could break rendering in certain contexts. If you need entity normalization, do it in a separate step before minification.
Why is my favicon link removed during aggressive minification?
It shouldn't be. <link> is a void element with required attributes; the minifier keeps it. If you see it missing, the input likely had malformed HTML (an unclosed tag earlier in the document) and the parser merged the link into a previous element's content.
Is my HTML sent anywhere?
No. Parsing happens in your browser; no upload, no logging. Network tab shows no requests during Process.
What about XHTML vs HTML5?
The tool emits HTML5 by default (void elements self-close without trailing slash). Toggle "self-close void elements" in beautify mode to emit XHTML-style <br /> instead of <br>; useful for legacy XML pipelines.