About the HTML Formatter & Minifier
This HTML formatter does two opposing jobs from one box. In Format mode it re-indents markup two spaces per level, correctly leaving void elements such as img, br, input and meta at the same depth rather than opening a new one. In Minify mode it collapses runs of whitespace, closes the gaps between adjacent tags and, if you choose, strips comments, then reports how many characters you saved as a percentage. It is useful for making sense of markup pulled out of a template engine, a CMS export or a page's view-source. Processing happens in your browser, so unreleased page templates stay private.
How to use the HTML Formatter & Minifier
- 1
Paste your HTML into the HTML box.
- 2
Set Action to Format to indent the markup, or Minify to compress it.
- 3
Leave 'Strip comments when minifying' ticked unless your comments carry conditional or build directives you need to keep.
- 4
Read the Savings panel for the before and after character counts and the percentage removed.
- 5
Copy the output or download it as index.html or index.min.html.
What people use it for
Understanding markup from view-source
Server-rendered pages often arrive as one enormous line. Indenting reveals the component boundaries and makes it obvious which wrapper is adding the extra padding.
Cleaning up a CMS or newsletter export
Markup pasted out of a WYSIWYG editor is typically unindented and comment-heavy. Formatting first makes the nesting mistakes visible before you start editing.
Trimming an email template
Gmail clips messages past roughly 102 KB and shows a 'view entire message' link. Minifying table-based email HTML often brings a borderline template back under the threshold.
Void elements and why the indenter needs to know them
HTML has a fixed set of void elements that never take a closing tag: area, base, br, col, embed, hr, img, input, link, meta, source, track and wbr, plus the obsolete param. A formatter that treats every tag as an opening tag increases the indent level on each of them and never decreases it, so a document with a handful of images and meta tags drifts steadily to the right and never comes back. This tool keeps an explicit list and does not increase depth for those names, nor for tags written with a trailing slash, nor for declarations and doctype nodes that begin with an exclamation mark. The trailing slash in a br tag is an XHTML habit rather than a requirement: the HTML living standard treats it as optional and ignores it on void elements. It does change meaning inside inline SVG and MathML, where XML parsing rules apply and a self-closing tag is genuinely self-closing.
What minifying is really worth once compression is involved
Stripping whitespace and comments typically removes 10 to 25 per cent of raw HTML. Over the wire the gain is far smaller, because gzip and brotli are extremely good at compressing exactly the repetitive whitespace a minifier removes; the incremental saving after compression is often only a couple of per cent. The real cost of minified HTML lies elsewhere. Whitespace between inline elements renders as a single space, so collapsing it can change layout in text flows and, notoriously, closes up the gaps that inline-block layouts depend on. Content inside pre and textarea, and anything styled with white-space set to pre or pre-wrap, is whitespace-significant, and this minifier collapses that too. Review those areas after minifying, and prefer running minification as a build step rather than storing the minified file as your source of truth, since the indentation you discard cannot be recovered exactly.
Tips
- Minify a copy, never your working file — the process discards formatting you cannot reconstruct.
- Conditional comments used for older Outlook rendering are stripped with everything else, so untick the comments option for email templates.
- The formatter reflows structure only; it will not close unclosed tags, so fix those before you run it.