HTML Formatter

How the HTML Formatter works

The formatter scans your markup with a forgiving HTML tokenizer that recognises comments, the doctype, CDATA sections, start and end tags (including attribute values in quotes that contain >) and plain text. It then builds a tree using the same rules browsers use for void elements such as <br>, <img> and <input>, and for end tags that may be left out, such as </li>, </p> and </td>. Unclosed or stray tags do not stop it: they are kept and the rest of the document is still formatted.

Block-level elements (div, p, ul, li, table, section and so on) start on their own line and are indented one level per nesting depth. Inline elements such as a, span, strong, em and code stay on the same line as the text around them, because adding line breaks inside a sentence would add visible spaces. Tags and attributes are copied exactly as written. The contents of pre, textarea, script and style are kept verbatim, so whitespace-sensitive text and code are not changed.

How to use the HTML Formatter

1. Paste your HTML into the input box, open an .html file, or select Load example.
2. Choose the indentation: 2 spaces, 4 spaces or tabs.
3. Select Format HTML, or press Ctrl + Enter (Cmd + Enter on a Mac).
4. Copy the formatted markup or download it as an .html file.

Example

This single-line markup:

<div class="card"><h2>Order <strong>#1042</strong></h2><ul><li>Keyboard<li>Cable</ul><pre>  Total:  $59.98</pre></div>

is formatted with 2-space indentation as:

<div class="card">
  <h2>Order <strong>#1042</strong></h2>
  <ul>
    <li>Keyboard
    <li>Cable
  </ul>
  <pre>  Total:  $59.98</pre>
</div>

The <strong> element stays inline with its heading text, the list items keep their omitted end tags, and the spaces inside <pre> are unchanged.

Common use cases

• Reading minified HTML copied from a page's source or from a browser's developer tools.
• Tidying email templates and CMS snippets before editing them by hand.
• Seeing the nesting of a large template to find an element that was closed in the wrong place.
• Making generated markup readable before pasting it into documentation or a code review.

Common errors and how to fix them

The HTML is nested more than the allowed depth

A tag was opened and never closed, so the parser keeps nesting deeper. Look for a missing closing tag rather than assuming the markup is genuinely that deep.

The page renders differently after formatting

Indentation adds whitespace, which is significant inside pre and textarea, and between inline elements such as span and a. Check those areas specifically; the rest of the document is unaffected.

Template placeholders were reflowed oddly

Server-side and client-side template syntax is not HTML, so the formatter treats it as text. Where you can, format the rendered HTML rather than the template.

Frequently asked questions