HTML Formatter & Beautifier
Paste messy or minified HTML to beautify it with 2 spaces, 4 spaces or tabs, or minify it for production. Only whitespace changes, so the page renders exactly the same.
Ctrl+Enter also works. Only whitespace changes: the page renders the same.
Want to see the page itself? Paste the result into the HTML viewer to preview it at desktop, tablet or phone width.
A Formatter That Does Not Change Your Page
Whitespace in HTML is not always decoration. A space between two inline elements is a visible space, a line break inside a paragraph separates two words, and inside <pre> or <textarea> every character counts. A beautifier or minifier that treats all whitespace as noise produces code that looks tidy and renders differently:
| Input | Careless formatting | What the page shows |
|---|---|---|
| <b>Save</b> <i>now</i> | <b>Save</b><i>now</i> | "Savenow" instead of "Save now" |
| <p>hello world</p> | <p>helloworld</p> | Two words glued into one |
| class="card active" | class="cardactive" | Neither class applies any more |
| <button>A</button><button>B</button> | One button per line | A gap appears between the buttons |
This formatter collapses a run of whitespace to a single space instead of deleting it, keeps form controls and images on the line they share, leaves <pre> and <textarea> untouched, keeps entities such as encoded and keeps conditional comments. Each change to the engine is tested by parsing the page before and after with the same HTML parser browsers use, and comparing what would be displayed.
How Much Does Minifying HTML Save?
It depends on how the page was written. Measured with this minifier on the home pages of well-known sites, before compression:
| Page | Before | After | Saved |
|---|---|---|---|
| developer.mozilla.org | 119 KB | 75 KB | 37% |
| w3.org | 49 KB | 42 KB | 14% |
| gov.uk | 84 KB | 74 KB | 12% |
| php.net | 53 KB | 48 KB | 9% |
Measured on 12 October 2026. Gzip or Brotli compression on the server narrows the gap, because repeated whitespace compresses well, so minifying matters most for HTML that is inlined, sent in an email, or served without compression.
Formatting Shows Errors, It Does Not Fix Them
Indenting HTML is the quickest way to see its structure: a closing tag that lands at the wrong depth usually means an element was never closed, or was closed in the wrong order. The formatter keeps your markup as written, so it will not repair those mistakes. Paste the result into the HTML validator to get each error with its line, and see how to find unclosed tags and fix incorrect nesting.
HTML Indentation: 2 Spaces, 4 Spaces or Tabs
2 spaces
The most common choice in front-end projects and the default of Prettier. Deep trees stay readable on a narrow screen.
<div>
<p>
Hello
</p>
</div>4 spaces
Common in back-end templates and older codebases. More separation between levels, at the cost of width.
<div>
<p>
Hello
</p>
</div>Tabs
Each reader sets the width they like in their editor, which is why some teams prefer them for accessibility.
<div> <p> Hello </p> </div>
Whatever you pick, use what your repository already uses: mixed indentation makes every diff noisier than the change it contains.