Developer Formatting

HTML formatter

What to do
Indent

Processed in your browser · nothing is uploaded

Local · pre, script, style and textarea untouched
Advertisement
320 × 100

Re-indents HTML by nesting depth, leaving the contents of pre, textarea, script and style exactly as it found them.

How to use the html formatter

1 Paste the markup and choose an indent.
2 Format re-indents by nesting depth; Minify strips it out again.
3 pre, textarea, script and style come back exactly as they went in.
4 Copy the result, or save it as a file.

Those four are protected for a reason: whitespace inside them is significant. Re-indenting a pre block changes what the page displays, and re-indenting a script can break a template literal or a line comment. Void elements; br, img, input, hr and the rest; are handled too, since they have no closing tag and must not increase the indent depth.

Each protected block is set aside whole before any indenting happens, matched from its opening tag to the first close that fits. Which is exactly why the HTML spec makes you write <\/script> inside a JavaScript string: a literal </script> ends the element for every parser that will ever read the page, this one included. If a script block comes back cut short, that string is the reason.

The other place the input can confuse it is an unescaped angle bracket inside an attribute value. The tokeniser splits on <, so title="a < b" is read as the start of a tag. Writing it title="a &lt; b" is what the spec asks for anyway; this is one more argument for doing it.

This is a formatter rather than a linter. It will not close a tag, fix nesting, or notice a duplicated attribute. An unclosed tag shows up as everything after it indented one level too deep, which in practice is a perfectly good way to find it.

Questions

No. Those, with textarea and style, are preserved byte for byte because whitespace in them is significant.

MDN, HTML reference
Advertisement
300 × 250
Was this tool any good?
Internal signal only · I use it to find the tools worth rebuilding