HTML Formatter
Beautify messy or minified HTML with clean indentation, one element per line.
Paste or type HTML above to beautify and indent it.
How it works
Paste minified or badly indented markup and the HTML formatter re-prints it with clean,
consistent indentation: one element per line, nested children indented by 2 spaces, 4 spaces
or a tab — your choice. Multi-line attribute lists are collapsed onto a single line, void
elements such as <br> and <img> are never given a bogus
closing tag, and short elements like <li>One</li> stay on one line so
lists and headings remain readable. The contents of <pre> and
<textarea> are preserved byte-for-byte because whitespace is significant
there, while <script> and <style> blocks are re-indented
to match the surrounding markup.
The parser is forgiving in the same way browsers are: implicit end tags
(<li>, <td>, <p>) are understood, and
anything genuinely broken — a stray closing tag or an element you never closed — is reported
above the output instead of silently mangling your markup. Everything happens in your browser
with plain JavaScript: no upload, no server, no ads, so it is safe for email templates, client
work and internal pages. Use Copy HTML or Download .html to take the beautified result with
you.
Frequently asked questions
How do I format HTML code online?
Paste your HTML into the box and it is re-indented instantly. Pick 2 spaces, 4 spaces or a tab for the indentation, then use Copy HTML or Download .html to take the beautified markup with you. Nothing is uploaded — the formatting runs in your browser, so it also works offline.
Does beautifying HTML change how the page looks?
Almost never. The formatter only adds or removes insignificant whitespace between tags, and it deliberately leaves the contents of <pre> and <textarea> byte-for-byte intact because whitespace is significant there. Very rarely, collapsed whitespace between inline elements can shift spacing by a single space, so check the result before shipping.
What is the difference between formatting and minifying HTML?
Formatting (beautifying) adds line breaks and indentation so humans can read and diff the markup — use it while developing. Minifying strips that whitespace to make the file as small as possible in production. They are inverse operations, so you can format minified HTML here and minify it again with the HTML Minifier.