HTML Formatter

What is the HTML Formatter?

HTML delivered by servers, CMS exports and email builders is often a single line or inconsistently indented, which makes debugging layout problems tedious. An HTML formatter parses the markup and writes it back with each nested element on its own line, indented by depth, so the document structure is visible immediately.

Good formatters are careful about whitespace-sensitive content. Text inside <pre> and <textarea> must be left untouched, inline elements such as <a> and <strong> should not gain extra spaces that change how text renders, and the contents of <script> and <style> are treated as code rather than markup.

When to use the HTML Formatter

Format HTML when you inspect markup copied from a browser, clean up the output of a visual editor or email builder, review a template produced by a code generator, or prepare a snippet for documentation. Readable structure makes it far easier to spot a missing closing tag, a wrongly nested list or a div that wraps too much. Minify the final version when you embed HTML in a JavaScript string, an email or a JSON payload where every byte counts.

How to use the HTML Formatter

1. Paste your HTML into the input area.
2. Select the indent size: 2 spaces, 4 spaces or tabs.
3. Press Format to beautify or Minify to compress.
4. Review the output and look for unclosed or mis-nested tags.
5. Copy the result back into your editor or template.

Examples

Before:

<div class="card"><h2>Title</h2><p>Hello <strong>world</strong></p><ul><li>One</li><li>Two</li></ul></div>

After:

<div class="card">
  <h2>Title</h2>
  <p>Hello <strong>world</strong></p>
  <ul>
    <li>One</li>
    <li>Two</li>
  </ul>
</div>

Common errors and tips

• Formatting is not validation. Browsers silently repair broken HTML, so a clean-looking result can still hide a missing closing tag.
• Void elements such as <br>, <img> and <input> never have closing tags.
• Minifying removes comments and collapses whitespace; avoid it for content where spacing matters, such as preformatted text.
• Mis-nested tags like <b><i></b></i> produce odd indentation, which is a useful clue that something is wrong.
• Run your final markup through the W3C validator for a full standards check.

Privacy: runs entirely in your browser

Markup, including unreleased pages or email templates, is formatted locally in your browser and is never uploaded. This tool runs entirely in your browser: nothing you enter is uploaded, stored or logged on our servers, and it keeps working even if you go offline after the page has loaded.