jsonecho

HTML Formatter

Indent messy or minified HTML so the structure is clear.

Loading the tool...

How to use HTML Formatter

  1. Paste your HTML.
  2. Choose the indent.
  3. Copy the formatted result.

About HTML Formatter

Copying the HTML of a page out of the developer tools or from an email template tends to give you one endless line. The formatter puts block elements on their own lines and indents children under their parents. Inline elements such as <b> and <a> stay in the flow of the text.

Content in <pre>, <textarea> and <code> is not touched, because whitespace matters there. Embedded styles and scripts are formatted too.

Frequently asked questions

Does formatting change how the page renders?

Usually not. HTML treats most whitespace as a single space. In a few spots, like between inline elements, a line break can add a visible space, so check pages that are sensitive to it.

Will it fix my invalid HTML?

No, it formats what it is given. Use the HTML Validator to find unclosed tags.

Does it format inline CSS and JavaScript?

Yes, style and script blocks are indented along with the rest of the document.

What about HTML email templates?

They work, but remember that email clients are picky. Format a copy for reading and keep the original for sending.

More in HTML Tools

All tools →