How to format HTML
- Paste your HTML into the box above.
- Pick the indentation width your project uses.
- Read the result. Each level of nesting is one step deeper.
- Check any layout-sensitive markup, since whitespace between inline elements is meaningful.
- Copy the formatted markup, or download it as a .html file.
What this formatter handles
- Correct indentation that follows the actual element nesting.
- Void elements such as img, br and input do not open a new level.
- Short text-only elements stay on a single line rather than exploding into three.
- The contents of pre, textarea, script and style are preserved exactly.
- Comments kept by default, or removed on request.
- Doctype declarations and conditional comments handled without breaking.
Indentation is how you read structure
HTML is a tree, and indentation is how a tree is shown on a flat page. Without it, working out which closing tag matches which opening one means counting by eye through hundreds of characters. With it, the shape is obvious at a glance and an unclosed element usually announces itself as a section that never comes back to the left margin.
That is the main reason to format: not tidiness, but debugging. A missing </div> in minified markup is genuinely hard to find. In indented markup it is visible.
The whitespace warning worth taking seriously
HTML is not like CSS or JSON, where whitespace between tokens is always insignificant. Between inline elements it renders as a space, and that space is part of the layout.
<span>a</span><span>b</span> renders as "ab". Put those on separate indented lines and it renders as "a b". The same applies to inline-block elements, which is why grid layouts built from them break when someone reformats the source. If your markup is layout-sensitive, check the rendered result rather than assuming formatting is free.
Raw-text elements are protected
- pre: every space and line break is displayed exactly as written.
- textarea: the content is the field's initial value, whitespace included.
- script: reindenting JavaScript from an HTML parser's perspective is unsafe.
- style: the same argument applies to embedded CSS.
The formatter recognises these and copies their contents through untouched. To tidy the code inside them, use the JavaScript and CSS tools on the extracted content.
Void elements and single-line elements
Elements such as img, br, input, meta and link have no closing tag. A formatter that does not know this indents everything after an image one level too deep, and the error compounds down the document. This one knows the full list.
It also keeps short text-only elements on one line. <h2>Title</h2> stays as written rather than becoming three lines, which is both more readable and closer to how people actually write markup by hand.
Formatting is not validation
A formatter indents what it is given. It does not check that elements are properly nested, that required attributes are present, or that the document is valid HTML. Badly nested markup will produce oddly indented output, which is itself a useful signal that something is wrong.
For a real correctness check, run the document through the W3C validator. To compress the markup again for shipping, the HTML minifier reverses this operation. Nothing is uploaded at any stage.
Formatting generated markup
Markup produced by a template engine, a page builder or an export tool is frequently indented according to the template's structure rather than the output's, which produces something worse than no indentation at all, nesting that looks wrong and misleads you about the document tree.
Reformatting from scratch fixes that, because indentation is derived from the actual element nesting rather than from whatever the generator emitted. It is also the fastest way to spot a template bug: if a section indents further and never comes back, an element is not being closed, and you now know roughly where in the template to look.