HTML Formatter
Indent markup by nesting depth, preserving pre and textarea
Everything runs in your browser. Your data never leaves your device.
Related tools
How to use
Indentation follows tag depth: an opening tag increases it, a closing tag decreases it, and void elements leave it alone. Getting that last rule wrong is what causes other formatters to drift ever deeper down a document.
Paste your HTML
Minified output, a copied DOM subtree or a hand-written fragment all work. The document does not need to be complete or valid.
Choose the indentation
Two spaces, four spaces or tabs. Match your project's existing convention so the formatted output does not create noise in version control.
Check preserved regions
Content inside pre and textarea is left byte-for-byte intact. Whitespace there is significant, and reformatting it would visibly change the rendered page.
Examples
Formatting a minified fragment
A single-line section containing a header, a list and an image expands into a nested tree where the list items sit one level inside the ul, making the structure readable at a glance.
Void elements stay flat
An img or br tag does not open a new level, so following siblings stay at the correct depth. Formatters that miss this push the rest of the document steadily to the right.
About this tool
Format minified or inconsistently indented HTML into a readable tree. Void elements such as img, br and input correctly do not open an indent level, and whitespace inside pre and textarea is preserved exactly, because reindenting it would change what the browser renders.