HTML Formatter

Make messy markup readable

HTML copied from a page's source, an email template, a CMS export or a minified build is often one long line or inconsistently indented. The formatter re-indents it with two spaces per nesting level, putting child elements on their own lines so you can see the structure and spot where a tag is opened and closed.

Good uses

• Reading the source of an email template before editing it.
• Cleaning up HTML pasted from a WYSIWYG editor.
• Understanding the structure of a page you are scraping or debugging.
• Preparing snippets for documentation or code review.

What it does not change

Tags, attributes and text content are kept as they are; only indentation and line breaks change. It works on full documents and on fragments such as a single <div> or table. Because whitespace inside elements like <pre> and inline text can matter to how a page looks, check the rendered result if the exact spacing of text is important.

If formatting fails

The most common cause is a tag that is never closed, or closed in the wrong order, such as <b><i>text</b></i>. Browsers silently repair such markup when displaying it, which is why a page can look fine while its source is broken. Fix the nesting and format again.