Indent HTML markup for readability using a simple formatter that keeps tags and text in order.
Try an example
Load a ready-made sample into this tool and run it. Every result you see is calculated live by the tool itself — nothing here is a pre-written answer.
Sample: input: <div><p>Hello World</p></div>
How to Use
- Paste HTML into the box.
- Click Run.
- Copy the indented markup.
What this HTML formatter does
This HTML formatter takes markup written in a compressed or untidy block and indents it so the structure is readable: nested elements step inward, and each tag starts on its own line. Minified or machine-generated HTML is hard to scan; after formatting, you can see where elements open and close and find the section you need to change. Nothing in the markup itself is added, removed or renamed.
How the formatting works
Paste your HTML in, run the formatter, and copy the indented result. The formatter works through the tags in order, tracking nesting depth as it goes, and keeps your text and attributes where they were. It suits fragments as well as whole pages — a copied component, a template snippet or an email template body.
Good to know
This is a simple formatter. It indents tags line by line and does not rewrite, validate or repair your markup: a missing closing tag will still be missing afterwards, just easier to spot. If your HTML has structural errors, fix them in an editor after formatting has made them visible.
Frequently asked questions
Will formatting fix broken HTML?
No. Formatting only changes whitespace and indentation. Broken nesting, missing tags and bad attributes stay broken, although the indented layout often makes the problem obvious. Treat the formatter as a reading aid, not a repair tool.
Is my markup changed in any other way?
No. Tags, attributes and text keep their order and content; only line breaks and indentation are added. If you compare before and after, the rendered page should be identical — the difference is purely how the source reads.
Can I format a small fragment instead of a full page?
Yes. A single element, a list, or a section copied from a larger document formats on its own. The indentation is relative to the fragment, so paste the result back at the nesting level it came from.
How to use HTML Formatter
- Paste HTML into the box.
- Click Run.
- Copy the indented markup.
Limitations
This is a simple formatter: it indents tags line by line and does not rewrite, validate or repair markup.