HTML Formatter
Beautify messy HTML into clean, indented markup, or minify it for production with the size saving shown. Nothing leaves your browser.
Beautify for reading, minify for shipping
Hand-written HTML drifts into a mess: mixed indentation, tags run together, stray blank lines. Beautify re-flows it into tidy, consistently indented markup with one element per line, so you can actually read and edit it. Choose two or four spaces, set an optional line wrap length, and keep or discard your existing line breaks.
When it is time to ship, Minify goes the other way. It collapses the whitespace between tags, trims long runs of spaces, and removes ordinary comments, so the file downloads faster. The exact byte count and percentage change appear above every time.
Whitespace-safe minification
A careless minifier corrupts your page by flattening whitespace that actually matters. This
one does not. Before collapsing anything, it lifts out the contents of pre,
textarea, script and style elements, minifies the rest,
then puts them back byte for byte. A code sample inside a pre keeps its exact
indentation, and inline scripts and styles are left intact.
It also respects conditional comments. Ordinary comments are stripped, but the legacy Internet Explorer conditional blocks are preserved because removing them could change how a page renders in those browsers.
Pitfalls to watch for
Minifying does not merge or remove attributes, and it will not touch inline event handlers, so
your markup keeps working. Note that collapsing whitespace between inline elements such as
span or a can very occasionally change the visible spacing on a page;
if a layout depends on a single space between two inline tags, double-check it after minifying.
Cleaning up a whole front end? Reach for the CSS minifier, the JavaScript minifier and the JSON formatter too.