Free HTML Beautifier
This free HTML beautifier takes minified or messy markup and returns it with one block tag per line and consistent indentation, so you can see how elements are nested. Inline tags stay with their text, short elements stay on one line, and the content of pre, textarea, script and style blocks is left exactly as written. It suits developers and marketers who need to read or edit page source.
HTML Beautifier
Generators and Converters
About this tool
Pages are often delivered as a single long line, or as markup indented by several different tools and people. Reading that is slow and mistakes hide easily: an unclosed div, a stray tag or a heading in the wrong place. Indenting each level makes the nesting visible at a glance.
The beautifier splits the markup into tags, comments and text, then indents by the depth of each block element. Inline tags such as a, strong, em and span stay inside their paragraph, and void elements such as br, img, input and meta do not increase the depth. You can pick two spaces, four spaces or tabs. The text inside pre and textarea and the code inside script and style are never reformatted, because extra whitespace there can change what the page shows or does.
It formats what you give it and does not repair broken HTML, so an unclosed tag will show as an indent that never returns. Use it before editing a template, when comparing two versions of a page, or when checking the HTML a plugin has produced. Nothing you paste is stored.
Frequently asked questions
Does beautifying change how the page looks?
It should not. The tool only adds line breaks and indentation between block tags, and content in pre, textarea, script and style is untouched. Browsers collapse whitespace between most elements, so compare the page before and after if exact spacing matters to you.
Can it fix invalid HTML?
No. It formats the tags it finds and does not add missing closing tags or reorder elements. Broken nesting usually shows up as indentation that does not return to the left, which helps you find the problem, but you still need to correct the markup yourself.
What is the difference between beautifying and minifying?
They are opposites. A beautifier adds line breaks and indentation so people can read the code. A minifier removes them so the file is smaller to download. Keep the beautified version while you work and publish a minified copy.
Which indentation should I choose?
Use whatever your project already uses. Two spaces keeps deep markup narrow, four spaces is common in many style guides, and tabs let each person set their own width in their editor. The choice does not change how the page works.