What it does
The HTML Formatter indents HTML so that nested elements line up and the structure is easy to follow. It can also minify HTML for production, removing comments and the whitespace between tags while leaving <pre>, <textarea>, <script> and <style> blocks exactly as written.
How to use it
- Paste HTML into Input, or click Sample.
- Click Beautify to indent, or Minify to compress.
- When beautifying, choose the indent and tick Wrap long attributes to put each attribute of a long tag on its own line.
- Copy or download the result.
Example
<ul class="nav"><li><a href="/">Home</a></li><li><a href="/tools">Tools</a></li></ul>
Beautified:
<ul class="nav">
<li><a href="/">Home</a></li>
<li><a href="/tools">Tools</a></li>
</ul>
Good to know
- Beautifying keeps everyday HTML as it is, including tags without a closing tag such as
<br>and<img>. - Minifying removes normal comments but keeps conditional comments (
<!--[if …]>). - Whitespace between inline elements can matter:
<b>a</b> <i>b</i>shows a space between the words. Check the page after minifying if spacing looks different.
FAQ
Does it fix broken HTML? It re-indents what is there but does not add missing closing tags. Browsers are forgiving, so check the result in a browser.
Can it format the CSS and JavaScript inside the page?
Inline <style> and <script> blocks are indented along with the HTML. For a full clean-up, use the CSS Formatter and JavaScript Formatter.