HTML Formatter

Minified HTML that arrived as one 40,000-character line is unreadable, and hand-indented HTML that got edited six times is barely better. The tool above does both directions: re-indent it so you can read it, or strip it back down so you can ship it.

How it works

Paste your markup, choose format or minify, and pick a 2- or 4-space indent. Everything runs in the browser — nothing is uploaded, which matters when the page you are debugging contains session tokens or customer data.

Format tokenises the input and re-emits it one node per line, increasing the indent after an opening tag and decreasing it before a closing one. Three details make the output correct rather than merely tidy:

• Void elements — <br>, <img>, <input>, <meta>, <link> and the rest of the HTML5 void set — never open a level, so the following content is not wrongly indented under them.
• Raw-text elements — <script>, <style> and <textarea> — have their contents scanned through to the literal closing tag, exactly as the HTML5 content model specifies. A < inside a JavaScript string or a CSS selector is therefore not mistaken for the start of a tag.
• Comments and the doctype are passed through untouched.

Minify collapses runs of whitespace and joins everything into a single line. Whitespace that contains a newline is treated as pretty-printing and dropped; a bare inline space — the one between two adjacent <span> elements on the same line — is preserved as a single space, because removing it would visually merge the two words.

What it deliberately does not do

This is a formatter, not a validator and not a sanitiser. It will happily re-indent markup with an unclosed <div>, and the output will show the mis-nesting as an indent that never comes back to the left margin — which is often the fastest way to find the unclosed tag, but it is not an error message. For conformance checking, run the markup through the W3C validator.

Nor does it minify the contents of <script> and <style>. Those are preserved verbatim, because compressing JavaScript safely requires parsing JavaScript, and a regex that tries anyway will eventually break on a template literal. Use a real bundler for that.

Attribute order, quoting style and letter case are left exactly as you wrote them. The tool changes whitespace and nothing else, so a formatted file and its minified form always represent the same document.

When to use each mode

Format is for reading: inspecting a page's source, reviewing a template diff, or working out why a server-rendered fragment is nesting differently from what the template implies. Indentation makes structural mistakes visible in a way a wall of text does not.

Minify is for transport, and its value is smaller than it used to be. Over HTTP with gzip or Brotli, removing whitespace from HTML typically saves a few percent, because compression already handles repeated whitespace well. It still helps for content squeezed into a fixed budget — an email template, an inline critical-CSS block, a data attribute containing a fragment.

Do not minify what a build step will minify for you, and never commit minified HTML as source; the readable version is the one humans have to maintain.

Related reading and tools

If you are formatting markup in order to understand it, the structural rules are worth knowing directly: HTML5 essentials covers the element categories, which elements may contain which, and why the void and raw-text distinctions above exist at all. Where the markup is generated by a view layer rather than written by hand, Spring MVC shows where the template sits in the request flow.

For the equivalent operation on data rather than markup, use the JSON formatter or the YAML formatter.