HTML Formatter
Indent an HTML document without changing how it renders, entirely in your browser.
Runs entirely in your browser. Nothing is uploaded, logged or stored.
Paste a minified or badly indented page and read it properly. The formatting happens in your browser, and the document that comes out renders exactly like the one that went in.
How it works
The document is read into a tree — which is where void elements, script and style content, and HTML's optional closing tags are dealt with — and then written back out with new indentation.
Where the lines fall is decided by how a browser reads whitespace, not by what looks neat. Any run of whitespace renders as a single space, so turning a space into a newline and an indent changes nothing. Creating one where there was none does: it is what turns two adjacent inline elements into two separated by a space.
So whitespace is only added or removed between block-level boxes and at the edges of one, where a browser renders none of it. That is the exception that lets a minified page be opened up, and it is also why a run of inline elements stays on the line it was on.
A tag the formatter has never heard of is treated as inline, because that is the answer that adds no whitespace and so cannot change the page.
Examples
| Case | Input | Result |
|---|---|---|
| A list with no indentation | <ul><li>One</li><li>Two</li></ul> | <ul> <li>One</li> <li>Two</li> </ul> |
Frequently asked questions
Is my page sent anywhere?
No. The formatter is JavaScript running in this page. Nothing is uploaded, nothing is logged and nothing is stored — you can turn off your network connection and the tool still works.
Why did my inline elements stay on one line?
Because moving them would change your page. Whitespace between two inline boxes is rendered as a space, so putting <span>a</span><span>b</span> on two lines inserts a gap between them that was not there. Most formatters do it anyway; this one does not.
Will it close my unclosed tags?
No. It understands that a second list item closes the first, so it indents your list correctly, but it writes back the tags you wrote. Adding a closing tag would be editing your markup rather than laying it out, and where exactly it should go is not always obvious.
Does it validate the HTML?
No. It has no schema, no rules about which element may contain which, and no opinion about your attributes. The only things it refuses are a tag, a comment or a script block that never closes, because from there it can no longer tell markup from text.
What happens to my scripts and styles?
They come back byte for byte. Inside a script a < is a less-than sign rather than the start of a tag, and inside a <pre> or a <textarea> every space is yours. Those four elements are left exactly as they were. If you want the script or the stylesheet itself formatted, the CSS formatter is next door.
Good to know
- The document that comes out renders the same as the one that went in. That is asserted by the tests over a corpus rather than left to inspection.
- Nothing is invented: no closing tag is added, no attribute is requoted, no entity is decoded and no tag name is recased. Only the spacing between attributes changes, because it is never rendered.
- The wrap width decides whether an element with inline content stays on one line or opens up, so a short paragraph reads as one line and a long one is broken at spaces it already had.