HTML formatter
Beautify messy HTML, or minify it for production.
Runs in your browser. Nothing you type is sent anywhere.
- 2 or 4 space indent
- One click minify
- Nothing uploaded
How to format HTML
- Paste your HTML.
- Pick an indent size, or turn on minify.
- Copy or download the result.
Beautify vs minify
| Beautify | Minify | |
|---|---|---|
| Indentation | Adds 2, 4 or 8 spaces | Removes it |
| Comments | Kept | Removed |
| Whitespace between tags | Normalized | Removed |
| Content in pre, textarea, script, style | Untouched | Untouched |
Where minified HTML matters
- A production page loads a little faster and uses less bandwidth once whitespace and comments are gone.
- Minified markup is harder to read in view-source, which is a fair trade in production but a downside while debugging.
Tips for formatting HTML
- Keep a readable, indented copy in source control and minify only what you deploy, since debugging minified markup by eye is slow.
- 2-space indent suits deeply nested markup, and 4-space is easier to scan on shallow, simple pages.
What indentation does and does not affect
- It never changes what a browser renders, since whitespace between block-level tags collapses regardless.
- It can visibly shift spacing between inline elements like <span>, if a design relies on exact whitespace there. Check those spots after formatting.
- It has no effect on JavaScript behavior, since the page's DOM structure stays the same either way.
HTML formatter FAQ
What does minify do here?
It removes comments and the whitespace between tags, without touching the text or attributes inside pre, textarea, script and style tags.
Will formatting change how my page looks?
No. Indentation and spacing between tags do not affect rendering, so the page looks the same before and after.
Does it fix broken or unclosed tags?
No. It reformats the HTML you give it. Fix missing or mismatched tags in your editor first.
Can I format a full HTML document?
Yes, including the doctype, head and body. Very long documents may take a moment to format.
Does it validate my HTML?
No. It reformats or minifies whatever markup you give it, and does not check for missing alt text, unclosed tags or other validation issues.
Are inline style and script tags reformatted too?
Yes, when beautifying. The formatter indents the CSS inside a style tag and the JavaScript inside a script tag along with the surrounding markup.
Does minify remove comments used by a templating system?
Standard HTML comments (<!-- ... -->) are always removed, including ones a templating system might use as markers. If your comments carry meaning elsewhere, format only and skip minify.
Can I format just a fragment, without a full document?
Yes. A snippet of a few tags formats the same way as a whole page. It does not need a doctype, head or body to work.