← All Tools
HTML Beautifier🔒 100% local
Format and indent HTML code for readability. Configurable indent size.
Indent Size (spaces)
HTML Input
HTML Beautifier: related tools
Re-indents HTML by splitting the input on tag boundaries and printing every token on its own line, increasing the indent level for each opening tag that is not a void element such as img, br or input. You choose an indent of 1 to 8 spaces. It is a tokenizer rather than a parser: no DOM is built, nothing is validated, and the markup is never rendered or sent.
HTML Beautifier: how to use it
- Set the indent size. Two spaces is the default.
- Paste the markup into the box.
- Press Beautify, then Copy Output.
HTML Beautifier: worked example
<div><span>Hello</span><p>World</p></div> with indent 2becomes<div>
<span>
Hello
</span>
<p>
World
</p>
</div><img src="a.png"><br><p>Hi</p>becomes<img src="a.png">
<br>
<p>
Hi
</p>img and br are on the void-element list, so they do not push the level down and the p starts back at column 0.
HTML Beautifier: when to use it
- Untangling a minified or single-line fragment before you try to read it.
- Making pasted template markup diffable before you commit it.
- Reindenting an HTML snippet for a blog post or a support ticket.
HTML Beautifier: what it does not do
- The splitter is a regex on <...>, not a parser. A > inside an attribute value is cut in the wrong place, and an HTML comment such as <!-- note --> is treated as an opening tag, so everything after it lands one level deeper.
- Every text node goes on its own line, so inline markup is broken up: <p>Hello <b>there</b></p> becomes four lines and gains whitespace when rendered, which can change spacing between inline elements.
- It never wraps long attributes, closes unclosed tags or validates anything. Running it twice on its own output changes nothing, but running it on already-prettified HTML will flatten inline elements.