HTML Formatter and Beautifier: Clean Up HTML Code

What the HTML formatter does

It takes minified, copy-pasted, or CMS-mangled HTML and re-indents it so the nesting is obvious. Block elements such as div, section, ul, li, table, head, and body each get their own line, indented one level deeper than their parent. Short runs of inline content, like a paragraph with a link and some bold text, stay together on one line so you can still read the sentence.

It is a tolerant formatter, not a validator. Browsers accept messy HTML, and so does this tool. It never adds closing tags that were not in your source, never reorders attributes, and never touches the contents of pre, textarea, script, or style beyond re-indenting script and style blocks. The work happens in your browser; the markup is not uploaded anywhere.

Why HTML is harder to format than JSON

In JSON, whitespace between tokens never matters. In HTML, it sometimes does. The space between two inline elements, like <a>Home</a> <a>Docs</a>, renders as a visible gap. Remove it and the links touch. Add a line break inside a pre element and the page shows an extra line.

So a good formatter needs to know which elements are inline and which are blocks, and treat whitespace accordingly. This one keeps inline runs intact, collapses runs of spaces to one (which is how browsers render them anyway), and leaves preformatted content exactly as it was.

Worked example

Input: <ul><li>Dark mode</li><li>Search is <em>3x</em> faster</li></ul><p>We shipped <strong>dark mode</strong> and a new <a href="/api">API</a>.</p>

Formatted with 2 spaces, the ul sits on its own line, each li is indented two spaces with its text on the same line (the em stays inline), and the closing </ul> comes back to the left edge. The paragraph fits within 120 characters, so it stays on one line with its strong and a tags inline. If it were longer, the p would open on one line, the content would be indented beneath it, and </p> would close on its own line.

Common reasons to use it

Reading someone else's page source. View-source on a production site usually shows minified markup. Paste it here to see the structure before you copy a component or debug a layout.

Cleaning up email templates. HTML emails are nested tables inside tables. Indentation is the only way to see which td you are editing.

Reviewing CMS output. WordPress, Webflow, and page builders often spit out deeply nested wrappers. Formatting shows how many divs you are actually shipping, which is a real performance and accessibility smell.

Before a diff. Format both versions with the same settings, then compare them in the text diff checker. Line-based diffs of minified HTML are useless; formatted HTML diffs cleanly.

Pitfalls

Unclosed tags stay unclosed. HTML lets you omit </li>, </p>, and </td>. The formatter nests them the way it reads them and does not invent closing tags. If your indentation looks deeper than expected, you probably have a missing close tag earlier. That is a useful signal, not a formatter bug.

Inline-block layouts. If your CSS uses display: inline-block on elements that sit side by side, the whitespace between them renders as a small gap. Formatting can add or remove that whitespace when it moves elements onto separate lines. Modern layouts use flexbox or grid, where whitespace between items does not render.

Template syntax. Handlebars, Liquid, JSX, Vue, and Svelte templates are not plain HTML. Simple ones format fine because the braces are treated as text, but attributes like {...props} or @click may be split oddly. Format the rendered output instead.

Minify is conservative. It removes comments and collapses whitespace, but keeps the single spaces between inline elements that affect rendering. It will not rewrite attributes or drop optional tags like aggressive build-time minifiers do. For production builds, use your bundler's HTML minifier.

Indentation: 2 spaces, 4 spaces, or tabs

Two spaces is the most common choice for HTML because nesting gets deep fast, and four spaces pushes content off the right edge by the fifth level. Tabs let every reader pick their own width. Match whatever your project's .editorconfig or Prettier config says, so your formatted snippet does not create noise in code review.