HTML Formatter and Minifier markup
Indent HTML according to block structure or minify it, leaving pre and script content untouched.
What this tool does
The awkward part of formatting HTML is that whitespace affects the rendered result. Space between words and inline elements shows up as a visible gap, so breaking lines in arbitrary places changes what users see.
This tool therefore separates elements into block and inline. Block elements such as div, p, and li each go on their own line and are indented by nesting depth, while inline elements such as b, span, a, and img stay on the same line as the surrounding text. Indentation can then be added without altering the rendered output.
Content inside pre, textarea, script, and style is copied through verbatim. Script bodies in particular often contain a less-than sign that is not a tag, as in a < b, so the opening tag through to its matching closing tag is captured as a single unit rather than being parsed as markup.
When to use it
Use it to study a page source that arrived on one line, to check the structure a template engine produced, to untangle deeply nested markup such as an email template, or to shrink an HTML fragment that will be inlined.
Input and output examples
<div class="card"><h2>Title</h2><p>Body <b>text</b> here</p></div>
<div class="card">
<h2>
Title
</h2>
<p>
Body <b>text</b> here
</p>
</div>
Block elements go on their own lines while the inline <b> stays within the sentence.
<div><pre> keep\n this </pre></div>
<div>
<pre> keep
this </pre>
</div>
Whitespace and line breaks inside pre are preserved exactly.
Notes and limitations
This is a formatter, not a parser. Markup with a missing closing tag or incorrect nesting comes out with indentation that drifts, which is actually a useful clue for locating the problem. Minification keeps meaningful whitespace around inline elements and only removes it between block elements, but check the result for layouts that depend on whitespace, such as inline-block elements placed side by side.
Frequently asked questions
Does indenting change how the page looks?
No. Inline elements and text stay on one line, and only block elements, where whitespace does not affect rendering, are split onto separate lines.
Can script bodies contain a less-than sign?
Yes. Script and style are read from the opening tag to the closing tag as a single unit, so a < character inside is never mistaken for a tag.