HTML Formatter & Minifier

Beautify or minify HTML — the contents of pre, textarea, script and style are preserved exactly.

HTML Input

<section>
  <h1>
    Title
  </h1>
  <p>
    Hello
    <strong>
      world
    </strong>
  </p>
  <ul>
    <li>
      One
    </li>
    <li>
      Two
    </li>
  </ul>
</section>

Beautifying & minifying HTML

Beautify places each element on its own line and indents children under their parents, keeping void elements (like <br> and <img>) on one line. Crucially, the contents of <pre>, <textarea>, <script> and <style>are treated as opaque and preserved exactly — never re-indented or collapsed. Minify strips inter-tag whitespace and comments while keeping those same regions byte-for-byte. Processing is 100% local — nothing is uploaded.

Built and maintained by Meet Shah · Last updated 24 July 2026

What this tool is used for

Making a minified template readable enough to find an unclosed element.
Normalising indentation on markup that several people have edited.
Reading a fragment pasted out of a page's source with no line breaks at all.
Checking the real nesting depth of a table or a deeply wrapped component.
Preparing markup for review so the diff reflects content changes rather than whitespace.

How it works in practice

A worked example

A template arrived minified and needs indenting, and part of it is a code sample whose spacing has to survive untouched.

Input

<div class="card"><h2>Title</h2><pre>  keep
    exactly  this</pre><p>Hello <span>there</span> friend</p></div>

Output

<div class="card">
  <h2>
    Title
  </h2>
  <pre>  keep
    exactly  this</pre>
  <p>
    Hello
    <span>
      there
    </span>
    friend
  </p>
</div>

The pre block came through byte for byte, including its leading two spaces and the double space in the middle, while everything around it was re-indented. That is not a happy accident — pre, textarea, script, style and comments are matched as raw regions and emitted verbatim, because in the first two of those whitespace is content and in the second two it can be syntax. Everything else is treated as structure, which is what makes the indentation safe to change.

The edge case that catches people

Look at what happened to the paragraph, and then imagine it without the spaces. Feed in a fragment where an inline element touches its neighbours directly and the formatter puts each on its own line — which renders as though a space had been typed, because a newline between inline elements collapses to one. A total followed immediately by a bold number followed immediately by a unit comes back reading as three separate words. The markup is equivalent by every structural measure and the rendered page is not.

When not to use this tool

Not on a template, and not on output. Anything containing another language's delimiters — a templating expression, a server-side block, a framework directive — is not HTML yet, and a formatter that only knows tags will happily indent through the middle of a construct it cannot see. On the other side, minified production HTML is minified on purpose: beautifying it to read is fine, and committing the beautified version undoes a build step somebody added deliberately.

Frequently Asked Questions

Will formatting change how my HTML renders in a browser?: No. HTML ignores whitespace in most contexts (except inside <pre> and <textarea>). The formatter only adds/removes indentation, so the page renders identically before and after.
Is my HTML private when I use this tool?: Completely. All formatting runs as JavaScript in your browser — nothing is sent to a server. You can safely format HTML containing API keys, internal URLs, or unreleased content.
Can it handle minified single-line HTML?: Yes. Paste minified HTML — even multi-kilobyte single-line output from a build tool — and the formatter expands it into properly indented, readable code.
Does the formatter validate HTML too?: It flags structural issues it cannot parse, but it doesn't enforce W3C rules. For full HTML validation, paste the formatted output into the W3C Markup Validation Service.
What indentation style does it use?: Two spaces by default (the most common convention for HTML). The formatter normalizes mixed tabs/spaces to a consistent 2-space indent and preserves your attribute order and values exactly.
Why can reformatting change how inline elements are spaced?: Because whitespace between inline elements is rendered as a space. Putting `<span>a</span><span>b</span>` on separate lines adds a gap that was not there — the one case where formatting HTML genuinely alters the visual result.
How are pre and textarea handled?: Their contents must be left exactly as they are, since whitespace inside them is significant. A formatter that indents inside a `<pre>` block visibly changes the rendered output, which is why those elements are skipped rather than reflowed.

Common errors and gotchas

Reformatting inline elements onto separate lines, which inserts a rendered space that was not there before.
Reindenting inside a `pre` or `textarea`, where whitespace is significant and the change is visible.
Expecting it to validate. It reports what it cannot parse; it does not enforce the specification.
Assuming attribute order or quoting will be preserved exactly if the formatter normalises them.
Formatting a template with server-side tags interleaved, which a pure HTML parser may reorder.