HTML formatter

What does it do?

Every block element (<div>, <p>, <ul>, <li> …) goes on its own line, indented by how deeply it is nested. Inline elements such as <a>, <b> and <span> stay inside the sentence, so text still reads naturally. The formatter only changes whitespace between tags; your content and attributes stay exactly as they were.

Options

• Indent with 2 spaces, 4 spaces or a tab.
• Keep blank lines preserves at most one empty line where you had them, so your own grouping stays visible.
• Keep inline elements on the same line can be switched off to put every tag on its own line.

Formatting uses js-beautify, which runs in your browser; nothing is uploaded. For XML, which has stricter rules, use the XML formatter.

Where messy HTML comes from

Template engines, page builders, e-mail tools and "view source" on a minified site all produce markup that is hard to read. Format it here to follow the nesting, find the unclosed element or compare two versions in a diff.

Whitespace in HTML can matter

Browsers collapse whitespace between inline elements into a single space, but not in <pre>, <textarea> and elements styled with white-space: pre. The formatter leaves the contents of <pre> and <textarea> alone. Between inline elements, adding line breaks can introduce a visible space where there was none (<b>a</b><i>b</i> is not the same as the two on separate lines), which is why keeping inline elements on one line is the default.

E-mail HTML

For HTML e-mails, which use tables and inline styles, format a copy to read it, but send the original. Mail clients can be sensitive to small differences in whitespace.

To check XML-based formats, such as an RSS feed or SVG, use the XML formatter. To tidy the styles and scripts that you copied out of a page, see the CSS beautifier and the JavaScript beautifier.