๐ HTML Formatter
Reformat HTML that's been squashed onto one line, or that has broken indentation, into readable code indented according to its tag hierarchy. Useful for reviewing or debugging source code.
How to use
- Enter the HTML code you want to format.
- Choose an indent width (2 or 4 spaces).
- The formatted result appears automatically. Use the "Copy" button to copy it.
How the calculation works
This tool breaks lines between tags (between ">" and "<") and re-indents them according to nesting depth. If a line starts with an opening tag (such as <div>) that is not closed on the same line, the following lines are indented one level deeper; a line with a closing tag (</div>) steps back one level. An element opened and closed on one line, such as <h1>Heading</h1>, leaves the depth unchanged, as do void elements with no closing tag (<img>, <br>), self-closing tags such as <br />, comments and <!DOCTYPE>. It does not fully parse the HTML โ it only looks at the sequence of tags โ so it is fast and can make even malformed HTML roughly readable.
Worked example
Formatting this one-line HTML with an indent of 2 <div class="card"><h1>Title</h1><p>Some text</p><img src="a.png"></div> becomes <div class="card"> <h1>Title</h1> <p>Some text</p> <img src="a.png"> </div> <img> is a void element with no closing tag, so it does not deepen the indentation.
Things to be aware of
- Whitespace between tags becomes a line break. Spacing between inline elements (such as between <b>A</b> <i>B</i>) can affect rendering, so take care.
- Code inside <script> and <style> is not formatted.
- Line breaks and spaces inside <pre> and <textarea> may be altered.
- Formatting only; use the HTML minifier to compress.
FAQ
Does this format the contents of <script> or <style> tags too?
Indentation is applied based on the surrounding tag hierarchy, but the JavaScript or CSS code inside isn't itself reformatted or beautified. Use a dedicated JS/CSS formatter for that.
Could angle brackets inside attribute values be misread?
Normal HTML attributes are fine, but unusual edge-case input could produce an unexpected line break. Treat this as a lightweight formatter rather than a full parser.
Can this also minify HTML?
No โ this tool only reformats (adds indentation); it doesn't minify.