Format and beautify HTML online

How it works

1. 1

   Paste HTML into the Input box.

2. 2

   Select an indent width.

3. 3

   Press Format, or Minify for compact markup.

4. 4

   Copy the result.

About the HTML Formatter

View-source output, email templates and markup generated by page builders are often one dense block of tags. This formatter places each element on its own line and indents children inside their parents, so you can see the document structure at a glance. It understands void elements like img and br, and it leaves the inside of script, style, pre and textarea alone.

What you can do

• Indent nested HTML with 2 spaces, 4 spaces or tabs.
• Minify markup by removing whitespace between tags.
• Treat void elements such as br, hr, img, input, link and meta as self-closing, so they do not push the next tag deeper.
• Keep comments and the DOCTYPE line as they are.
• Pass the contents of script, style, pre and textarea through untouched so code and preformatted text are not altered.

When it works best

• Reading the structure of a page copied from view-source or a scraped snapshot.
• Cleaning up an HTML email template exported from a newsletter tool.
• Spotting an element that is nested in the wrong place before you edit a CMS block.

Things to know

• Your markup is processed in the browser and is not sent anywhere.
• The tool does not validate HTML or fix missing closing tags; unclosed elements simply keep the indentation deeper than expected.
• Inline elements such as span, a and strong also go onto their own lines, which can add visible spaces between words. Minify trims text, which can remove spaces you meant to keep around inline tags.
• For the CSS and JavaScript inside a page, use the CSS Formatter and JavaScript Formatter.

Frequently asked questions