How to format or minify HTML

One box, two buttons. Format HTML rewrites the markup one tag per line with nested elements indented, using the width chosen next to the buttons — tab, 2, 4 (the default) or 8 spaces. Compress Html returns the same markup with the whitespace squeezed out instead.

Both buttons work on the text in the box and nothing else: pressing them sent no request at all. A 716 KB document takes about 2.4 seconds to format and 2.1 seconds to compress, and markup that is already written without redundant whitespace comes back at the same size, because the minifier only removes whitespace.

Paste the markup into the box and set the indent width if the 4-space default is not what you want.
Press Format HTML. Every tag lands on its own line, children are indented one level deeper, and runs of spaces, tabs and newlines in ordinary text collapse to a single space.
Press Compress Html for the shippable version: whitespace runs become single spaces and the indentation disappears, while the tags, attributes, comments, entities and doctype stay as they were.
Copy takes whichever result is on screen and Clear empties both the box and the result area.

What each button does with whitespace

Reading versus shipping

Formatting is for reading. It puts each tag on its own line, indents by nesting depth and normalises the spaces inside text. Indentation inserts whitespace where there was none, so a formatted page can render differently from the original: <div><span>a</span><span>b</span></div> renders as "ab", while the formatted version renders as "a b".

Compressing is for shipping. A run of whitespace becomes one space — the way a browser reads it — so the line break between two inline elements survives as a single space instead of being deleted. Checked in all six locales, the minified output rendered identically to its input on inline runs, lists, tables and nested blocks.

What compression refuses to touch

pre and textarea bodies are copied byte for byte, because their whitespace is part of the document rather than of the layout. So are script and style bodies, which are written in other languages: collapsing a newline inside them would turn the rest of a // comment into code, or change what a template literal contains.

Quoted attribute values are kept exactly, runs of spaces included, whether they sit in value, title or a data-* attribute. Comment text, entities such as   and ©, self-closing tags and the doctype pass through unchanged as well. What disappears is only the whitespace between things.

Repeating a run, and the 80-character wrap

Running either button twice changes nothing the second time: a formatted document formats to itself and a compressed one compresses to itself. The result panel is a highlighted preview, so the Copy button rather than a manual selection is the reliable way to take the text out.

A tag whose attributes would push the line past 80 characters is wrapped onto the next line in formatted output, and the break falls between attributes rather than inside a quoted value. Text content is not wrapped, and compressed output contains no line breaks at all outside the protected bodies.

Where it runs and what it costs

Formatting and compressing both run in the page: no request left the browser while either button was pressed, so pasted markup is never uploaded and the tool keeps working with the network off.

Work is proportional to the input. 176 KB formatted in about 0.6 seconds and compressed in 0.5 seconds; a 716 KB page took 2.4 and 2.1 seconds. The minifier is a whitespace pass rather than a full HTML parser — it will not rewrite attribute quotes or drop optional closing tags — and the same engine backs the JavaScript formatter, so a script block inside your markup is beautified as JavaScript.