What the HTML formatter does
Two operations on HTML: beautify turns minified, machine-generated or copy-pasted markup into consistently indented code with one element per line, and minify strips comments and collapses whitespace for production. Formatting changes only whitespace between tags — never the tags, attributes or text content — so the page renders identically. It runs in your browser; markup from private sites is not uploaded.
Before and after
Before:
<div class="card"><h2>Title</h2><p>Some <strong>bold</strong> text.</p><ul><li>One</li><li>Two</li></ul></div>
After:
<div class="card">
<h2>Title</h2>
<p>Some <strong>bold</strong> text.</p>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>Inline elements (strong, a, span, code) stay on the same line as their surrounding text, because breaking them would change rendered spacing. Block elements each get their own line and are indented by nesting depth.
Where whitespace matters in HTML
- Inside
<pre>,<textarea>and<script>, whitespace is content. The formatter leaves those blocks untouched. - Between inline elements, a line break is rendered as a space. That is why
<a>tags on separate lines get a gap between them, and why the beautifier keeps inline runs together. - Between block elements, whitespace is ignored, so indenting
divs andlis is safe. - The minifier removes whitespace only where it is safe, keeping single spaces between inline content.
Common uses
- Reading the source of a page that shipped minified, or a template generated by a CMS or email builder.
- Cleaning up HTML pasted from Word, Google Docs or a WYSIWYG editor before committing it.
- Reformatting before a code review so the diff shows real changes, not indentation.
- Producing a minified snippet for an email template, an embed code or an inline
srcdoc. - Tidying HTML fragments for documentation and tutorials.
What minification saves
| Removed | Typical saving |
|---|---|
| Comments | Varies — can be large in templated pages |
| Indentation and line breaks | 5–20% of raw size |
| Redundant whitespace inside tags | Small |
| After gzip / brotli | 1–5% — compression already handles whitespace well |
As with CSS, minifying HTML matters less than it used to because transport compression is universal. It is still useful for stripping comments that may contain internal notes, and for size-limited contexts such as email and embed snippets.