HTML Formatter
Paste messy or minified HTML and get it cleanly indented, including the CSS and JavaScript inside <style> and <script> tags. Or minify it to make the page smaller.
Formatted with Prettier in your browser; your code is never uploaded.
Related Developer Tools
This HTML formatter turns minified or messy markup, such as the source of a web page, an email template or HTML exported from a CMS, into cleanly indented code where every nested element sits one level deeper than its parent. It uses Prettier, the code formatter built into most web projects and editors, so the result matches what your team's tooling would produce.
Before and After
<ul class="nav"><li><a href="/">Home</a></li><li class="active"><a href="/blog">Blog</a></li></ul><p>Read the <b>latest</b> posts.</p>
<ul class="nav"> <li><a href="/">Home</a></li> <li class="active"><a href="/blog">Blog</a></li> </ul> <p>Read the <b>latest</b> posts.</p>
Why Whitespace Matters in HTML
Browsers show a single space wherever HTML has one or more spaces or line breaks between words or inline elements. Formatting therefore has to be careful around tags like <b>, <a> and <span>. Take this line:
<p>Price: <b>$8</b>/month, <a href="/pricing">see all plans</a> and compare features.</p>
The default output keeps the page identical, wrapping only where a space already exists:
<p> Price: <b>$8</b>/month, <a href="/pricing">see all plans</a> and compare features. </p>
With Tidy inline tags, every element gets its own line, which reads well but puts a space between $8 and /month on the page:
<p> Price: <b>$8</b> /month, <a href="/pricing">see all plans</a> and compare features. </p>
Minifying HTML
Minifying removes what browsers ignore, mainly indentation and comments, so the page downloads faster. The gain is largest on pages with deep indentation; servers that send HTML compressed with gzip or Brotli already shrink repeated spaces well, so the size after compression, shown below the result, is the number that matters for loading time. Comments can contain notes you did not mean to publish, which is another reason to remove them from production HTML.
Related Tools
Format the stylesheet with the CSS formatter and scripts with the JavaScript formatter, turn Markdown into HTML with the Markdown converter, or compare two versions of a page in the diff checker.
Frequently Asked Questions
How do I format HTML?
Paste the HTML, or open an .html file, and the formatted version appears on the right as you type. Choose 2 spaces, 4 spaces or tabs for indentation and a line width, then copy the result or download it. CSS in <style> tags and JavaScript in <script> tags is formatted too.
Why is the > of some tags on the next line?
Spaces between inline elements such as <b>, <a> and <span> show on the page, so adding or removing one changes the text people see. When a line has to be broken next to such an element, the formatter breaks it inside the tag instead of adding a visible space. Turn on Tidy inline tags for cleaner-looking output if you do not mind that spacing may change, for example in a template you will review anyway.
Does it check my HTML for errors?
It reports problems that stop the HTML from being read correctly, such as a closing tag that does not match any open tag, with the line and column. It is not a full validator: browsers accept a lot of loose HTML (an unclosed <li> or <p> is allowed), so for attribute and nesting rules use the W3C Markup Validation Service.
What does Minify do to HTML?
It removes comments and turns each run of spaces and line breaks into a single space, which is how browsers display them anyway, so the page looks exactly the same. Content of <pre>, <textarea>, <script> and <style> is kept as it is, and Internet Explorer conditional comments stay. Remove spaces between block tags makes the file a little smaller but closes the gap between elements styled as inline-block, so check the page after using it.
Is HTML formatting the same as validation?
No. Formatting only changes indentation and line breaks to make the code readable; it does not fix wrong nesting or invalid attributes. If the formatter cannot parse the HTML, fix the error it shows first.
Is my code uploaded?
No. Prettier, the formatter used by most web projects, runs in your browser, in a background thread so even a large page does not freeze the tab.