Home / Tools / HTML Formatter
Free tool · runs in your browser

HTML Formatter

Indent HTML by nesting depth so the structure is readable, or minify it for production. Void elements are not indented as though they open a block, and the contents of pre, textarea, script and style are left untouched.

How it works

Void elements and raw-text elements

Two groups of elements need special handling, and a naive formatter gets both wrong:

Void elements — br, img, input, meta, link, hr and the rest — have no closing tag. A formatter that increments indentation on every opening tag will indent everything after an <img> one level too deep, forever.

Raw-text elements — pre, textarea, script, style — have contents that must not be reindented. Whitespace inside pre and textarea is rendered literally, so changing it changes the page. This tool passes their contents through unchanged.

Why minifying HTML is not just removing whitespace

In HTML, whitespace between inline elements is significant: <span>a</span> <span>b</span> renders with a space, and removing it renders ab. Aggressive minifiers use a tag-by-tag whitelist to decide where collapsing is safe.

This tool collapses whitespace between tags and runs of spaces in text, and strips comments. That is safe for most block-level markup but can close up a deliberate space between inline elements — check the result if your layout depends on one.

What it does with broken markup

It indents from a tag scan rather than a parsed tree, so unclosed or mismatched tags produce odd indentation rather than an error. That is deliberate: it means you can still format a fragment or a template with placeholder syntax in it. If you want strict checking, run the markup through a validator.

What people use it for

  • Reading minified HTML from a page source or an email template.
  • Formatting a fragment you pasted out of a template or a component.
  • Minifying static markup before embedding it in a string or shipping it.
  • Finding an unclosed tag by looking for where indentation stops matching the structure.
  • Normalising markup before a diff so real changes stand out.

Nothing is uploaded. This tool runs entirely in JavaScript in your browser. Your input is never sent to a server, never logged and never stored, and no account is required. Once the page has loaded you can go offline and it still works — open your browser's network tab and watch if you'd like to confirm it.

Frequently asked questions

Why isn't the content of my pre block indented?

Deliberately. Whitespace inside pre and textarea is rendered literally, so reindenting it would change what the page shows. The same applies to script and style, whose contents are code rather than markup.

Is it safe to minify HTML?

Mostly, with one caveat: whitespace between inline elements is significant, so collapsing it can remove a space your layout depends on. Block-level markup minifies safely. Always check the result if inline spacing matters.

Does it fix or validate broken HTML?

No. It indents from a tag scan, not a parsed document, so mismatched tags produce odd indentation rather than an error. That lets it format fragments and templates, but it means it is not a validator.

Will it break my template placeholders?

Handlebars, Jinja, ERB and similar placeholders are treated as text and passed through. They are not reindented intelligently, but they are not corrupted either.

Is my HTML uploaded?

No. This tool runs entirely in your browser. Nothing is uploaded, which matters when the thing you are formatting is a production config or a payload with real data in it.

Tools that run where your code is

This page does its work in your browser because sending your data to a server to process it is a bad default. Catalase applies the same idea to AI coding: a free, open-source code editor that runs language models on your own machine through Ollama, with no account and no telemetry. Cloud models are there when you choose one, not by default.

Download Catalase freeWhat is Catalase?

Related tools

All 30 free developer tools →