What an HTML beautifier does
HTML pages are often delivered with all whitespace between tags removed, or written by tools that produce a single long line. Browsers render these fine, but a person trying to read or edit the markup cannot see the nesting. Beautifying adds line breaks and indentation so every tag sits on its own line and children are indented beneath their parent.
The idea is purely cosmetic: the tags, attributes and text stay as they were. It is the HTML equivalent of pretty-printing code, and it makes structure obvious: which div closes where, which list items belong to which list.
When it helps
The usual situations are viewing minified markup copied from a page source, cleaning up the output of a template or a rich-text editor, tidying an email template before editing it, or preparing a snippet for a code review or documentation page. It is also handy when a layout bug comes down to a missing closing tag, because uneven indentation draws attention to the spot.
For other data formats the same idea applies. See the XML Formatter for XML, or the CSS Minifier if you need to go in the opposite direction with stylesheets.
How to beautify HTML with this tool
- Paste your HTML into the box labeled Minified or messy HTML. A one-line example is already there.
- Choose the indent size with the buttons below it: 2 spaces or 4 spaces. The result updates immediately.
- Read the formatted markup in the Beautified box.
- Click Copy to copy it. There is no download button.
Everything runs in your browser and the markup is not uploaded. The tool does not validate your HTML or report errors; it just reformats whatever you give it.
Limits of this beautifier
The tool is a lightweight tag-based indenter, and the page itself warns about this. It splits the text at every angle-bracket tag, puts text between tags on its own line, and indents by nesting depth. Void elements such as br, img, input, meta and link, and tags ending in a slash, are not treated as opening a new level.
Several things are not handled specially. A DOCTYPE line is treated like an opening tag, so everything after it can end up indented one level extra. Whitespace inside pre or textarea elements is not preserved, which can change how that content looks. Content inside script and style blocks is split like any other text, so code containing angle brackets, such as comparisons in JavaScript, may be broken across lines in odd ways. Inline elements like a link inside a sentence are also put on separate lines, so the result shows structure but may not look like a hand-formatted file.
Always review the output before pasting it into production, and keep your original.