HTML Formatter

How to use

1. Paste HTML — minified, hand-written, or copied out of a page with no indentation at all.
2. Pick an indent width, and a column to wrap long runs of text at.
3. Press Format HTML.
4. Copy the result, or download it as a file.

Features

• Never inserts a line break where no whitespace existed, because in HTML a newline renders as a space and would change the page.
• Leaves pre, textarea, script and style bodies exactly as they were — those are text the browser takes literally, not markup.
• Handles the missing closing tags HTML allows: a list of li elements written without them indents correctly instead of stepping right off the screen.
• Keeps short elements on one line, so a page of headings and paragraphs does not become three times as long as it needs to be.
• Shares its rules with the HTML minifier, so formatting then minifying gives back exactly what you started with.

Frequently asked questions

Can formatting HTML change how the page looks?

It can, and that is the whole difficulty. A newline in HTML renders as a space, so a formatter that puts two adjacent inline elements on separate lines has inserted a space between them that was not there — text that read "ab" now reads "a b". This tool only breaks lines where whitespace already was, or beside block-level elements where whitespace is not rendered at all, which is why some lines here stay long.

Why has my long line of inline elements not been wrapped?

Because there is nowhere in it a break could go. A run like a hundred adjacent span elements with no spaces between them has no safe break point — every possible one would add a rendered space. The tool leaves it on one line rather than quietly changing what the page says.

Does it format the JavaScript and CSS inside the page?

No. Script and style bodies are copied through untouched. They are different languages with their own formatters, and reindenting a template literal or a CSS string blind is how a build gets broken. Only the HTML around them is laid out.

What happens to tags I never closed?

The same thing a browser does. HTML makes closing tags optional in several places, so a new li closes the one above it, a new td closes the previous cell, and a p closes an open p. Without that rule, a perfectly valid list would indent one level deeper on every item until it ran off the page.

Related tools