📄 HTML Formatter & Minifier

Beautify HTML with consistent indentation, or minify it by stripping comments and unnecessary whitespace between tags. Runs entirely in your browser.

Mode

Beautify Minify

HTML

What each mode does

Beautify splits the input into tags and text runs, then indents two spaces per open element. The fourteen void tags - br, img, input, meta and the rest - never open a level, and neither does a /> self-closing tag. The sample line comes out as:

<div class="card">
  <h3>
    Title
  </h3>
  <p>
    Some text
  </p>
</div>

Text always lands on its own line, so beautifying is not purely cosmetic: new line breaks between inline elements render as spaces. Minify is the blunt inverse - comments deleted, whitespace between > and < removed, remaining runs of spaces squeezed to one - and it reports the before and after size.

Where a regex formatter gives up

Inline spacing is lost. <b>bold</b> <i>italic</i> minifies to bolditalic on screen, because that gap sits between two tags.
pre, textarea, script and style are not protected. Indentation inside <pre> is significant and will be flattened.
A bare > confuses the tokeniser - in an attribute value, or as a comparison in an inline script. Move scripts to their own file before beautifying a whole document.

Everything is processed in the page, so nothing you paste is uploaded. Treat it as a formatter for fragments and snippets, not a validating parser for a whole site.

Frequently asked questions

Does minifying HTML change how the page renders?

Usually not, but it can. HTML collapses runs of whitespace anyway, so indentation is free to remove - a single space between two inline elements is not, and neither is anything inside a pre block.

How much smaller does minified HTML get?

Ten to twenty per cent of the raw bytes for typical hand-indented markup. Over a gzip or Brotli connection the real saving is far smaller, since compression already handles repeated whitespace well - enabling compression beats minifying.

Why did my inline JavaScript break after beautifying?

Because a < in the script, as in for (i = 0; i < n; i++), looks like the start of a tag to the tokeniser and the rest of the line is re-indented as markup. Keep JavaScript in an external file, or format it with a JavaScript formatter instead.