HTML formatter and minifier
What this tool does
Two opposite jobs on the same text. Formatting adds line breaks and indentation so a human can follow the nesting; minifying removes everything a browser does not need. Both here work on the characters you gave, not on a rebuilt document, so what comes out is still your markup.
How to use it
- 1 Paste the HTML - a whole page or just a fragment.
- 2 Pick your indent, then choose Format or Minify.
- 3 Copy the result, or run it through the other button to compare.
Whitespace is not always noise
Between two inline elements a single space is visible text: remove it and "one two" becomes "onetwo". Between block elements the same space means nothing. The minifier here drops indentation but keeps a separating space where one is doing real work.
Why pre and textarea are left alone
Inside these, every space and newline is content the reader will see. Re-indenting a code block would silently change what it displays, and trimming a textarea would change the value a form submits. The same goes for script and style: their contents are another language and are passed through untouched.
It formats, it does not repair
Tools built on the browser parser quietly fix broken markup: they close your tags, drop stray ones and move elements into places the spec demands. That is often not what you want when you are debugging - the bug you are chasing may be exactly the thing that got repaired. This one reformats the text and leaves the mistakes where you can see them.
Minifying HTML is the small win
Stripping whitespace from a page usually saves a few percent, and gzip on the server would have compressed most of it anyway. The real weight is in images, fonts and scripts. Minify HTML because a template generator left the output unreadable, not because you expect the page to get much faster.