Developer Formatting

HTML formatter

Input

<div class="card"><h2>Title</h2><p>Body text</p><img src="a.png"></div>

What to do

Indent

Output

<div class="card">
  <h2>Title</h2>
  <p>Body text</p>
  <img src="a.png">
</div>

Processed in your browser · nothing is uploaded

Local · pre, script, style and textarea untouched

Re-indents HTML by nesting depth, leaving the contents of pre, textarea, script and style exactly as it found them.

How to use the html formatter

1 Paste your input. The result appears immediately.

2 Pick the operation you want.

3 Copy the result, or save it as a file.

Those four are protected for a reason: whitespace inside them is significant. Re-indenting a `pre` block changes what the page displays, and re-indenting a `script` can break a template literal or a line comment. Void elements — `br`, `img`, `input`, `hr` and the rest — are handled too, since they have no closing tag and must not increase the indent depth. This is a formatter rather than a linter: it will not tell you a tag is unclosed, it will simply indent everything after it more deeply, which is usually obvious enough to find the problem anyway.

Questions

Does it change my pre or script content? −

No. Those, with textarea and style, are preserved byte for byte because whitespace in them is significant.

Does it fix unclosed tags? +

What are void elements? +

Will it reformat minified HTML? +

Is my markup uploaded? +

Sources

MDN — HTML reference

Was this tool any good?

INTERNAL SIGNAL ONLY · WE USE IT TO FIND TOOLS WORTH REBUILDING