Tools
HTML Code Formatter
Paste your HTML code and click Format to clean it up with Prettier. Tab size and (for JS/TS) trailing semicolons are configurable. Switch languages from the toolbar.
About the HTML Formatter
The HTML Formatter re-indents raw HTML: it fixes nesting and indentation, wraps long attribute lists one per line once a tag exceeds Prettier's print width, normalizes attribute quoting to double quotes (class=foo becomes class="foo"), and self-closes void elements like <img> and <br> with a trailing slash. It doesn't add, remove, or reorder tags — only whitespace and quoting change. Paste in collapsed or inconsistently indented markup from a minifier, a CMS export, or browser view-source, and get back something readable. Formatting runs entirely in your browser — the HTML never leaves your machine, which matters if you're pasting markup from an internal admin panel or an unreleased page.
Under the hood this is Prettier 3's standalone build running prettier/plugins/html, the same parser Prettier's CLI uses for .html files, loaded dynamically so the page doesn't ship parsers for languages you aren't formatting. Tab size maps directly to Prettier's tabWidth option (1–8, default 2). Semicolons is disabled here because Prettier ignores the semi option for non-JavaScript parsers. The parser is forgiving like a browser: unclosed tags get auto-closed per HTML5 rules instead of being rejected. Only genuinely malformed markup — an unterminated opening tag, a stray mismatched closing tag — throws a syntax error shown inline with the line and column.
Reach for it when cleaning up markup before a code review, standardizing indentation across a template pulled from a legacy CMS, or making minified HTML readable enough to debug. One limitation worth knowing: only the HTML parser plugin loads here, so embedded <style> and <script> blocks are re-indented as blocks, but the CSS or JavaScript inside them is not reformatted — its original spacing is preserved as-is. If you need that inner content cleaned up too, format it separately with the CSS Formatter or the JavaScript Formatter and paste the result back in.
Examples
<!-- input -->
<nav class="menu"><ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul></nav>
<!-- output (tab size 2, the default) -->
<nav class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>Verified against Prettier 3.8.3 via prettier/plugins/html — the exact code path this tool runs.
<!-- input -->
<style>.a{color:red;font-size:12px}</style><script>function foo(){console.log(1)}</script>
<!-- output: the block re-indents, but inner CSS/JS is untouched -->
<style>
.a{color:red;font-size:12px}
</style>
<script>
function foo(){console.log(1)}
</script>Only the HTML parser plugin loads for this formatter, so nested CSS/JS isn't reformatted — run it through the CSS Formatter or JavaScript Formatter separately if you need that cleaned up too.
Input:
<div class=oops"broken>text</div>
Error shown inline:
Opening tag "div" not terminated. (1:1)
> 1 | <div class=oops"broken>text</div>
| ^^^^^^^^^^^^^^^Ordinary unclosed tags don't error — only genuinely broken syntax does, here an unescaped quote inside the class attribute.
Frequently asked questions
Is it safe to paste private or unreleased HTML into this tool?
Yes. Formatting runs entirely in your browser using Prettier's standalone build — the markup is never uploaded to a server, logged, or stored anywhere.
Does the HTML formatter also format the CSS and JavaScript inside a page?
No. This tool only loads Prettier's HTML parser plugin (prettier/plugins/html), so <style> and <script> blocks are re-indented as a single block, but the CSS or JS inside them keeps its original formatting. Format that content separately with the CSS Formatter or JavaScript Formatter.
Why am I getting a 'not terminated' or 'unexpected closing tag' error?
That means Prettier's HTML parser hit markup it genuinely can't make sense of, such as a broken attribute or a closing tag with no matching opener, and it throws a SyntaxError naming the exact line and column. Ordinary unclosed tags aren't an error on their own — the parser auto-closes them the same way a browser's HTML5 parser would.
Does the 'Semicolons' checkbox do anything for HTML?
No. That toggle only affects the JavaScript and TypeScript formatters. Prettier ignores the semi option for the html parser entirely, so the output is identical whether it's checked or not.
How is this different from running prettier --write on an HTML file locally?
Same engine and the same html parser, so output matches for a given tab width. This page only exposes the tabWidth option; other Prettier settings like printWidth (the line-wrap length, default 80) stay fixed here — install Prettier locally if you need to tune those.