Skip to content

HTML Formatter

Beautify messy HTML with indentation, or minify it — keeping pre, script and style content intact.

Mode

Runs in your browser — nothing you enter is sent to a server.

How the HTML Formatter works

Beautify puts each block element — div, p, ul, li and so on — on its own indented line. Inline elements such as strong, a and span stay inside their line of text, so sentences aren't broken apart. Void elements like br and img need no closing tag.

Minify removes comments and whitespace between tags. In both modes the contents of pre, textarea, script and style are kept exactly, because whitespace matters there. Conditional comments (<!--[if IE]>) are kept too.

Examples

Beautify

<div><p>Hello <strong>world</strong></p></div> becomes:

<div>
  <p>
    Hello <strong>world</strong>
  </p>
</div>

Minify

A list with a comment and line breaks, <ul> <li> One </li> <!-- note --> <li>Two</li> </ul>, becomes <ul><li> One </li><li>Two</li></ul>.

Frequently asked questions

Can minifying change how my page looks?

Rarely. Whitespace between inline elements can matter: two inline-block buttons separated by a line break have a small gap that disappears when minified. Check the page afterwards.

Does it fix broken HTML?

No. It re-indents what is there; unclosed tags make the indentation drift, which helps you find them. Browsers are forgiving, so broken HTML may still display.

How much does minifying save?

Usually 5–20% of the HTML size, depending on indentation and comments. Gzip or Brotli compression on the server saves much more, so use both.

Is my HTML uploaded?

No. It is processed in your browser.

Related tools

CSS Minifier

Minify CSS to make it smaller, or beautify minified CSS to make it readable.

Developer Tools

XML Formatter

Format or minify XML, and check that its tags are balanced.

Developer Tools