HTML Formatter
Beautify, indent, and minify HTML right in your browser. Paste or upload markup, pick your indent style, and get clean, readable HTML or a compact minified version instantly.
100% Client-Side Processing
Your HTML is parsed and formatted entirely in your browser. Nothing is uploaded to a server.
Beautify HTML with consistent indentation so nested tags are easy to read and debug.
Live preview
The preview runs in a sandboxed frame with scripts disabled, so pasted <script> tags are shown but never executed.
Table of Contents
What is an HTML Formatter?
An HTML formatter reformats HTML markup either for readability or for size. In Format (beautify) mode, it re-indents nested tags so the document structure is easy to scan and debug. In Minify mode, it strips comments and unnecessary whitespace so the same markup ships in fewer bytes.
This tool parses your HTML using the browser's own built-in parser — the same engine that renders web pages — so it handles real-world, imperfect markup (unclosed tags, mixed casing, missing quotes) the same way a browser would, then rewrites it cleanly.
How it Works
- Add your HTML: Paste HTML directly into the editor, or upload an .html file.
- Choose a mode: Switch between Format to beautify with indentation, or Minify to compress for production.
- Adjust the options: Pick an indent size (2, 4, 8 spaces, or a tab) in Format mode, or choose whether to strip comments in Minify mode.
- Copy or download: Copy the result to your clipboard or download it as an .html file.
Features
- Paste HTML or upload an .html file
- Beautify mode with 2, 4, 8-space, or tab indentation
- Minify mode that strips whitespace and line breaks
- Optional comment stripping in Minify mode
- Preserves <pre>, <script>, <style>, and <textarea> content exactly
- Keeps inline elements like <a>, <strong>, and <em> flowing naturally with surrounding text
- Live sandboxed preview so you can confirm nothing changed visually
- Output size, line count, and size-reduction stats
- Copy to clipboard or download as .html
- 100% client-side processing for privacy
Best Practices
- Beautify before code review: consistent indentation makes it much easier for teammates to spot structural issues in a diff.
- Minify only your shipped output: keep a readable, formatted source file and minify as a build step, not the file you edit day to day.
- Check the preview after minifying: confirm the rendered page still looks identical, especially around whitespace-sensitive inline text.
- Strip comments only when you're done debugging: comments often carry context for the next person to touch the file, so keep them in your source and strip them only in the minified build.
- Match your team's indent width: set the indent size to match your project's editor config (e.g. .editorconfig) so formatted output doesn't create noisy diffs.
Troubleshooting
The formatted output looks different from what I pasted
The browser's HTML parser automatically fixes structural issues like unclosed tags or missing quotes, so the output reflects the corrected structure — this matches how a real browser would render your original markup.
Attribute order or quoting changed
Attributes are re-serialized in their parsed order, and boolean attributes like disabled are written without a value. This doesn't affect rendering, but it can change a text diff.
Text inside <pre> or <script> looks untouched
That's intentional — content inside <pre>, <script>, <style>, and <textarea> is preserved exactly as-is, since whitespace and line breaks are often meaningful there.
Minified output still contains some whitespace
A single space is kept between words inside a line of text so words don't run together — only redundant whitespace between tags and repeated spaces are removed.
Common Use Cases
- Cleaning up scraped or exported HTML: reformat markup pulled from a CMS export, email template, or web scraper so it's readable again.
- Code review and debugging: beautify minified or compressed HTML from production to trace down a layout or markup bug.
- Shrinking page weight: minify static HTML templates or email markup before deploying to reduce transfer size.
- Standardizing a codebase: reformat HTML files to a consistent indent style before committing them to a shared repository.
- Preparing HTML snippets for documentation: beautify inline HTML examples so they're easy to read in a tutorial or README.
Frequently Asked Questions
No. The live preview renders inside a sandboxed iframe with scripts disabled, so pasted <script> tags are shown but never executed.
No. Both modes only change whitespace, indentation, and attribute serialization — the actual markup structure and visible output stay the same.
It uses the browser's built-in parser, which automatically corrects common issues like unclosed tags, so the output is always valid — but it won't flag or explain what was fixed.
It's preserved exactly as-is in both Format and Minify modes, since whitespace inside those elements is often significant.
Yes. In Format mode, choose 2, 4, or 8 spaces, or a tab character.
Only if you turn on the "Strip HTML comments" option — by default, comments are kept.
No. Everything happens locally in your browser, and nothing is uploaded or saved.