Format and beautify messy HTML code with configurable indentation
HTML beautification (formatting) adds proper indentation and line breaks to HTML code, making it easier to read and maintain.
<pre>, <textarea> or <code>.| Context | Whitespace collapses? | Safe to reformat? |
|---|---|---|
Between block elements (div, p, section) | Yes | Yes |
Between inline elements (span, a, strong) | Collapses to one space — but that space renders | No — it can add or remove a visible gap |
Inside <pre> | No | Never |
Inside <textarea> | No — it becomes the value | Never |
Inside <code> outside <pre> | Yes, but leading space shows | Cautiously |
Between <li> items | Yes | Yes |
| Between inline-block or flex items | Renders as a gap in inline-block; ignored in flex/grid | Depends on the layout mode |
br, img, input, meta, link, hr) need no closing tag, and the XHTML-style self-closing slash is optional in HTML5.lang and a charset meta. A missing lang attribute is a real accessibility failure, not a style nit.| Stage | Format | Why |
|---|---|---|
| Source in version control | Beautified | Diffs are readable and merges are possible |
| Served to browsers | Minified | Whitespace is dead weight; gzip recovers most but not all of it |
| Debugging a live page | Beautified | Formatting a minified response is the first step to reading it |
| Email HTML | Neither extreme | Some clients break on very long lines; keep them under 998 characters |
| Inline critical CSS | Minified | It sits in the render-blocking path |
Formatting is cosmetic. It will not correct invalid nesting — a <div> inside a <p>, a <li> outside a list, a table cell outside a row — and browsers silently restructure such markup while parsing, which is why the rendered DOM sometimes looks nothing like your source. It will not fix unclosed tags, duplicate id attributes, or missing alt text. Run the W3C validator alongside the beautifier; the two catch different classes of problem.
id or a semantic tag — that anchors you.<head> is where the useful information is: canonical link, meta tags, JSON-LD blocks and which frameworks loaded.It can. Whitespace between block elements is safely collapsible, but whitespace between inline elements renders as a single space, and whitespace inside pre or textarea is preserved exactly. A beautifier that does not respect those contexts will visibly change the page.
Two is the most widely used convention, including in the Google HTML/CSS style guide. Four is common in enterprise codebases. The only wrong answer is inconsistency within one file.
Yes, as a build step, while keeping the beautified source in version control. Minification removes comments and collapsible whitespace; gzip or brotli compression on top recovers most of the rest, so the combined saving is real but modest compared to image and script weight.
No. In HTML5, br, img, input, meta, link and hr are void elements and the trailing slash is optional and ignored. It is required only in XHTML or when HTML is being parsed as XML.
No. It reformats whitespace and does not repair invalid nesting, unclosed tags or duplicate IDs. Use the W3C validator for correctness and the beautifier for readability.
Everything on this page runs in your browser — nothing you type is uploaded or stored.
Short, exact answers to the questions people ask alongside this tool — the number first, then the working.
For teams, not just visitors
We build the calculators on SnoopTool as embeddable widgets in your branding, wired to your own lead form — the same maths, your colours, your domain, your leads. Tell us which one and we will send back a working demo you can put in front of your team.
Thanks — we have it, and you will get a reply from a person within one business day. Meanwhile every tool on SnoopTool stays free, with no signup.