HTML Formatter

What is the HTML Formatter?

The HTML Formatter is a free online tool that takes raw, messy, or compressed HTML and either expands it into clean, properly indented markup or shrinks it down to the smallest size that still renders the same. In one page you can beautify HTML so it is easy to read and edit, or minify it for production, and the tool shows you exactly how many bytes you saved when you minify. Everything happens inside your browser, so your markup is never uploaded.

Beautify vs minify

Beautifying and minifying are two opposite jobs. Beautifying adds line breaks and indentation so the nesting of your elements is obvious at a glance, which is what you want while you are reading or debugging a page. Minifying does the reverse: it removes HTML comments and collapses the whitespace between tags so the file is as small as possible, which is what you want when you ship to production and care about download size. This tool does both, so you do not have to keep two separate bookmarks.

How to use it

1. Paste or type your HTML into the input box.
2. Choose your indentation — 2 spaces, 4 spaces, or tabs.
3. Click Beautify to get clean, indented markup, or Minify to compress it.
4. Read the byte count and the percentage saved shown below the result.
5. Click Copy to grab the output. Done — no account, no upload, no waiting.

The method behind it

The tool runs a small hand-written tokenizer in your browser. It splits the HTML into tags, text, comments, and doctype declarations, then walks that list to rebuild the output. When beautifying, it tracks nesting depth and indents each line accordingly while keeping the content of pre, textarea, script, and style tags exactly as written. When minifying, it drops comments, collapses runs of whitespace, and removes the gaps between tags that do not affect rendering. Because nothing is sent over the network, the result appears instantly.

Examples

Beautify a one-line block

Input: <div class="card"><h2>Title</h2><p>Body</p></div>

Output:

<div class="card">
  <h2>
    Title
  </h2>
  <p>
    Body
  </p>
</div>

Minify a template for production

Input: a spaced-out template with comments and indentation. Output: a single compact string with comments removed and whitespace collapsed, plus a note telling you how much smaller it became — for instance, that it is now 38 percent smaller than the original.

Common use cases

• Cleaning up exports — tidy HTML that came out of a CMS, email builder, or page builder.
• Debugging layouts — read and fix a deeply nested page you did not write.
• Shrinking templates — minify before pasting into a build step or an inline string.
• Teaching and learning — show HTML structure with clear, consistent indentation.
• Measuring savings — compare a page's size before and after stripping whitespace.

Why use this one

Most online options make you pick between a formatter and a minifier on different pages. This tool does both, reports the byte savings, and runs entirely in your browser, so your HTML never touches a server. That matters when the markup is unreleased, internal, or contains private content. It is also fast, works on mobile, and needs no signup. When you also need to compress stylesheets, use the CSS Minifier; for data work see the JSON Formatter; and to generate markup from notes try Markdown to HTML.

Frequently asked questions