How to Format and Beautify HTML in the Browser (Free)
Why HTML indentation gets messy, how a formatter handles void tags and script blocks, and how to prettify or minify markup with nothing to install.
You copy the source of a live page, paste it into your editor, and it lands as a single 12,000-character line. Or a colleague sends an email template where the indentation drifted three tabs to the right somewhere around the fourth nested table. HTML gets ugly fast, and once it’s ugly it’s hard to read and harder to edit. The HTML Formatter puts it back into shape.
Why HTML indentation falls apart
Minifiers strip every newline on purpose, because smaller files load faster. Build tools like webpack and Vite ship production HTML as one line, which is great for the browser and miserable for a human. Then there’s copy-paste rot: you grab a snippet from one file, drop it into another with different indentation, and the levels stop lining up. Nested tables and deep <div> soup make it worse, since one missing indent throws off everything below it.
A formatter doesn’t guess what you meant. It reads the actual tag structure and rebuilds the indentation from scratch, two spaces per level.
HTML isn’t XML, and that matters
You can’t format HTML by pretending every tag has a matching close. HTML has rules XML doesn’t:
- Void elements like
<br>,<img>,<hr>,<input>, and<meta>never get a closing tag. Indent them as if they do and every element after them shifts one level too deep. - Closing tags are often optional. You can write
<li>one<li>twoand a browser knows the first item ends where the second begins. The same goes for<tr>,<td>, and<option>. - Everything inside
<script>,<style>,<pre>, and<textarea>is content, not markup. A<in your JavaScript is a less-than sign, not the start of a tag.
This formatter handles all three. It knows the void tags, applies the implied-close rules for list items and table rows, and copies script, style, and pre blocks through untouched so your code and whitespace survive exactly as written.
Format or minify
Format is the everyday button: paste compact HTML, get readable HTML with clean nesting. <ul><li>One</li><li>Two</li></ul> comes back as five lines you can actually scan.
Minify is the return trip. It removes the whitespace between tags and collapses runs of spaces in text down to one, which shrinks the file for production. It still leaves script, style, and pre alone, so nothing that depends on exact whitespace breaks.
One thing worth knowing: this tool is deliberately lenient. If your markup has a stray or unclosed tag, it won’t refuse to run. It formats what you gave it and shows a small warning about what looked off. It tidies; it doesn’t quietly rewrite your HTML to “fix” it, because a formatter that changes your structure behind your back is worse than one that leaves a mess.
It stays on your machine
The whole thing runs in JavaScript in your tab. Whether you’re pasting a client’s landing page, an internal admin panel, or an email with tracking parameters you’d rather not leak, none of it is uploaded and none of it is logged. Load the page once and it keeps working with the network off.
Paste any HTML into the HTML Formatter and it will indent, tidy, or minify on the spot, with no signup and no upload.