About the HTML Formatter
This HTML formatter turns a wall of markup into readable, consistently indented HTML. Paste minified output from a CMS, a template engine or the browser’s “copy outer HTML” and choose Beautify: block elements such as div, section, ul and table go on their own lines with 2 spaces, 4 spaces or tab indentation, while inline content — links, emphasis, code spans, images — stays on the same line as the text around it so paragraphs remain readable.
Choose Minify to go the other way: whitespace between block elements is removed, runs of spaces are collapsed, and comments are stripped (conditional comments are kept). The contents of pre, textarea, script and style are never reflowed, because whitespace there is meaningful; script and style blocks are re-indented as a unit when beautifying.
The parser is forgiving like a browser — optional end tags for p, li, td and similar elements are understood — and it reports any tags that were never closed or closing tags without a matching opener. Formatting happens entirely in your browser.
How to use the html formatter
- 1Paste your HTML into the input box.
- 2Choose Beautify or Minify.
- 3Pick 2 spaces, 4 spaces or tabs for indentation.
- 4Turn on Remove comments if you want them stripped.
- 5Check the markup report, then copy the result.
Formula and method
The markup is tokenised into start tags, end tags, text, comments and declarations, then built into a tree the way a browser would: void elements such as img, br and meta never take children, and optional end tags are inferred (a new li closes the previous li, a block element closes an open p). Closing tags with no matching opener are ignored and reported.
Beautify walks the tree and puts each block-level element on its own line, indented one level per nesting depth. Runs of text and inline elements are kept together on one line with whitespace collapsed, and an element whose content is all inline and fits within 120 characters is written on a single line. Minify writes the same tree with no indentation, removing whitespace next to block elements and collapsing other runs of whitespace to one space, which does not change how the page renders. pre, textarea, script and style content is preserved.
Worked examples
Beautify a minified page
The sample page has 15 elements. Each block element (html, head, body, div, ul, li…) gets its own line, while the h1 and p keep their inline em and a children on one line, producing 18 neatly indented lines.
Indent a small list
The first li has no closing tag, which HTML allows: the second li closes it implicitly. The formatter adds the end tags and indents each item by 4 spaces.
Minify and strip comments
Line breaks and indentation next to block elements are dropped, the comment is removed and the triple space inside the paragraph collapses to one. The space before <b> is kept because it is visible on the page.
Find unclosed and stray tags
The span is never closed — the browser closes it when </div> ends its parent, so the formatter writes </span> there and reports it. The </p> at the end has no matching <p>, so it is reported and dropped.
Frequently asked questions
Does formatting HTML change how the page looks?+
Beautifying adds line breaks and indentation between block elements, which browsers ignore. Whitespace inside inline content can render as a single space, so this formatter keeps inline runs on one line and never reflows pre, textarea, script or style content.
How much does minifying HTML save?+
It depends almost entirely on how much indentation, blank lines and commenting the source has — the tool shows the exact characters saved for your markup. If the server already compresses responses with gzip or Brotli, the saving on the wire is much smaller, because repeated whitespace compresses very well.
Why does the formatter add closing tags I did not write?+
HTML lets you omit end tags for elements such as li, p, td and option; browsers close them automatically. The formatter applies the same rules and writes the implied end tags so the structure is explicit.
Is my HTML uploaded anywhere?+
No. Parsing and formatting run in JavaScript inside your browser, so templates, internal pages and markup containing tokens never leave your device.
Can it format JSX, Vue or Handlebars templates?+
Plain template text usually survives, but this is an HTML formatter: JSX expressions in braces, Vue directives and Handlebars blocks are treated as ordinary text or attributes and are not re-indented by their own rules. Use Prettier for framework templates.