HTML Formatter

Indent and tidy HTML, or strip it down to one line.

About HTML Formatter

An HTML formatter indents markup so nesting is easy to follow, or minifies it by dropping comments and whitespace between tags, with byte sizes shown.

How to use

  1. Paste HTML or load a .html file. The result updates as you type.
  2. Choose Beautify to indent, with 2 spaces, 4 spaces or a tab, or Minify to shrink.
  3. Read the byte sizes under the output: original, result, and the percentage saved when minifying.
  4. Copy the result or download it as .html or .min.html, named after the loaded file.

What it does

  • Beautify uses js-beautify's HTML formatter: one element per line, children indented, inline elements such as <a>, <span> and <b> kept in the text flow, and the contents of <script> and <style> formatted as JavaScript and CSS. Lines are never wrapped. Keep blank lines preserves a single blank line where the source had one or more.
  • Minify is deliberately conservative. It removes HTML comments except conditional comments (<!--[if IE]>), deletes whitespace that touches a block-level tag such as <div>, <p>, <li> or <tr> (where it never renders), and collapses every other run of whitespace to a single space, so the space between </b> and the next word survives. Whitespace inside tags is collapsed outside quoted attribute values.
  • <pre>, <textarea>, <script> and <style> are left byte for byte as they were. Non-breaking spaces are not treated as whitespace.
  • Neither mode removes optional closing tags, quotes, or attributes, rewrites entities, or validates the document; invalid HTML is passed through with the same treatment.

Example

<ul>
  <li><a href="/">Home</a></li>
  <!-- nav -->
  <li>About <b>us</b> today</li>
</ul>
→ <ul><li><a href="/">Home</a></li><li>About <b>us</b> today</li></ul>

Privacy

Formatting and minifying run in the browser. No request is made, and nothing is stored.

Frequently asked questions

Does minifying HTML change how the page looks?
It can, if whitespace between inline elements is removed, because a newline between two <span>s renders as a space. This minifier keeps a single space in that position and only deletes whitespace next to block-level tags, where browsers never render it.
How much smaller does minified HTML get?
Usually 5 to 20 percent for hand-written or template-generated markup, mostly indentation and comments. After gzip or Brotli the saving is smaller, since repeated whitespace compresses well, so minifying HTML matters less than minifying JavaScript.
Why is whitespace inside <pre> kept?
The pre element, and textarea, display whitespace exactly as written, so collapsing it would change the content. Script and style blocks are kept too, because their whitespace rules belong to JavaScript and CSS, not HTML.
Should I indent HTML with 2 or 4 spaces?
Two spaces is the most common choice for HTML because deeply nested markup gets wide quickly; Google's HTML style guide and Prettier both default to two. Four spaces or tabs are fine when the rest of the project uses them.