HTML Formatter
Re-indent HTML so its nesting is readable. Fragments work as well as whole documents, and the contents of pre, script and style blocks are left exactly as written.
Your data never leaves your browser. This tool runs entirely on your device.
How it works
The formatter tokenises the markup and re-indents by nesting depth. It deliberately does not build a full DOM, because that would rewrite input it does not recognise — template placeholders, framework directives and partial fragments all survive intact here.
Only whitespace between tags changes. Attributes, text content and the order of everything are preserved exactly.
What is left alone
Some elements carry content where whitespace is significant, and reformatting them would change what the page does or displays:
- pre — whitespace is rendered literally, so indenting it would alter the output.
- textarea — leading whitespace becomes part of the field value.
- script — reformatting JavaScript is a different job with different rules.
- style — use the CSS formatter for stylesheet content.
Void elements
Elements like br, img, input and meta never have a closing tag, so they must not increase the indentation depth. Getting this wrong is what makes naive formatters produce output that drifts further right with every image on the page.
Frequently asked questions
Will this fix my broken HTML?
No, and that is deliberate. It re-indents what you give it without inserting missing tags or correcting nesting, so it never changes the meaning of your markup. Unbalanced tags are indented as-is rather than silently repaired.
Does it work on a fragment rather than a full page?
Yes. There is no requirement for a doctype, html element or body. A single div or a table row formats fine on its own.
Will it break my template placeholders?
No. Handlebars, Jinja, Blade and JSX-style expressions are treated as ordinary text and passed through unchanged, because the formatter never parses into a DOM.
Why is my inline script not reformatted?
Script content is JavaScript, not HTML, and reformatting it correctly needs a JavaScript parser. Its content is copied through untouched so nothing is broken.
Related tools
- CSS FormatterRe-indent CSS so it is readable, or minify it for production. Nested at-rules, comments and quoted values are all handled correctly.
- XML FormatterRe-indent XML so its structure is readable, and find out immediately if it is not well-formed. CDATA sections and declarations are preserved exactly.
- JSON FormatterPaste JSON to pretty-print it with consistent indentation, or minify it back down. Invalid JSON is reported with the exact line and column so you can find the problem.
- Base64 EncoderEncode any text to Base64, including emoji and non-Latin scripts. Switch to the URL-safe alphabet when the result has to travel in a URL.