HTML Formatter & Minifier
Beautify messy markup or squeeze it for production — with a live parse report and a side-by-side comparison.
Paste a page, a component, or a minified bundle. In Format mode the markup is rebuilt with consistent indentation, one element per line, wrapped long attribute lists and inline elements kept on a single line where they fit. In Minify mode comments and whitespace are stripped for production. Both modes run a parse pass first and report every real problem — unclosed tags, stray closing tags, duplicate ids, unquoted attributes — with line, column and a snippet, while the original and the processed output sit side by side.
Your HTML
Tip: press Ctrl+Enter (or ⌘+Enter) inside the box to run the active mode.
Format options apply to Format mode; “Minify: strip comments” applies to Minify mode. Tag casing applies to both.
The panes scroll in sync. Click any line in the report above to jump to it in the original.
Why format HTML at all
Browsers are famously forgiving: they will happily render a page where a <div>
was never closed, a </p> appears out of nowhere, or an attribute value is missing
its closing quote. The page loads — until the browser's error recovery quietly re-parents an
element, breaks your CSS selectors, or hides a column of your table. The same leniency makes
unformatted markup hard to work with:
- Diff noise. When a reflow changes indentation on 400 lines, the one real change is buried. Consistent formatting keeps diffs small and reviewable.
- Debugging. A parse report with line and column numbers tells you exactly where a structure is broken, instead of you hunting for a missing
</div>in a wall of text. - Team consistency. One person's two-space indent, another's tabs, a third's one-element-per-line — a shared formatter removes the argument and the cleanup pass before every commit.
What the minifier removes — and what it never touches
Production minification of HTML is about bytes on the wire. This minifier is deliberately conservative: it removes only what is provably invisible to the browser, and it will never rewrite anything that could change behaviour.
| Removed | Never touched |
|---|---|
Comments (<!-- ... -->) | <script> and <style> content (trimmed at the edges only) |
| Newlines and indentation between tags | <pre> and <textarea> content (whitespace is significant there) |
| Runs of whitespace inside text, collapsed to a single space | Entities ( , ©, numeric refs) |
| Whitespace before and after tags | Attribute names and values, tag structure, the <!DOCTYPE> |
The size bar above shows the raw byte savings and, where your browser supports it, the estimated gzip size of both versions — that is the number that actually matters on the wire, since most sites serve HTML compressed.
HTML parsing quirks that trip up formatters
- Void elements.
<br>,<img>,<input>,<meta>and friends never take content and never take a closing tag. A formatter that blindly pairs every open tag with a close tag will corrupt them — this one knows the full void list, and the report flags any</br>it finds. - Raw text elements. Inside
<script>and<style>the browser does not parse tags at all — a<in a JavaScript string is just a character. The tokenizer switches into raw-text mode there, so your inline scripts are formatted as text, never re-parsed. - Browser error recovery. When markup is broken, browsers apply a fixed set of recovery rules (implicit closing of
<p>, foster parenting of stray content, adoption of mismatched closes). The formatter never silently applies those rules to hide the problem — it reports the mismatch and the lines involved, so you fix the source instead of shipping the browser's guess. - Optional closing tags.
</p>,</li>and</td>are optional in HTML. Omitting them is valid; the report does not flag it — but a stray</p>with no open<p>in scope is flagged, because that is almost always a real mistake.
How to read the parse report
- Errors (red) are things a browser will recover from by guessing: unclosed elements, stray or mismatched closing tags, void elements with closing tags, unquoted attribute values containing whitespace, unterminated tags or quotes. Fix these first — the rendered page may already not do what you think.
- Warnings (yellow) are valid-but-smelly: unquoted attribute values, duplicate ids, images without
alt, a missing doctype (which puts the browser in quirks mode), an empty<title>. - Info (blue) is advisory: a missing
langattribute or no<title>at all. - Every entry carries line and column into the original text and a snippet of the offending line; clicking an entry jumps the left pane to that line.
Nothing on this page leaves your browser: there is no server round-trip when you paste, format or minify, no analytics on your inputs, and no storage of any kind.
Suggested
