HTML Formatter

What this HTML formatter does

Paste HTML that has been squashed onto one line, or written with inconsistent spacing, and the tool re-indents it so that nesting is easy to follow. It breaks the markup so each tag starts on a new line and indents children two spaces under their parent. Comments and the <!DOCTYPE> line are kept but do not deepen the indentation.

Typical uses

• Reading HTML copied from "view source", an email template or a CMS export.
• Checking that elements are nested the way you expect before debugging layout issues.
• Tidying a snippet before pasting it into documentation or a code review.
• Preparing two versions of a template for a clean side-by-side comparison.

How it decides on indentation

The formatter looks at each line after splitting between tags. A closing tag reduces the depth by one. An opening tag that is not closed on the same line increases the depth for the lines that follow. Elements that open and close on the same line, such as <p>Hello</p>, stay as one line.

Known limitations

• Void elements can confuse the depth. Tags that never have a closing tag, such as <br>, <img> and <input>, are not specifically recognised unless written in self-closing form (<br />). Written without the slash, they can cause the lines after them to be indented one level too deep. Add a trailing slash to those tags first for the best result.
• Whitespace-sensitive content inside <pre>, <textarea> and inline text may be re-broken. Do not format these in place if exact spacing matters.
• Embedded scripts and styles are treated as text; their contents are not reformatted as JavaScript or CSS.
• No validation. The tool will not tell you that a tag is unclosed or misplaced.

Tips

• Format first, then read from the top: the first line that looks wrongly indented usually marks the real problem.
• If the result looks off, look for an unclosed tag just above the strange indentation.
• For production, serve minified HTML and keep the formatted copy as your readable source.

Related tools: the XML formatter for structured data and the CSS minifier for stylesheets.