HTML Formatter and Minifier

How to use it

1. 1Paste your text into the box marked "Your HTML"Paste a page, a template or a fragment. Everything happens inside your browser — nothing is uploaded, so there is nothing for us to store, log or lose.
2. 2Read the result as it updatesThere is no button to press. Choose Format to indent or Minify to compress, and the result updates immediately. The output recomputes every time you change the text or one of the options above it.
3. 3Expect minification to be conservativeWhitespace between inline elements can be significant in HTML — it is a real space between words — so it is not removed everywhere a more aggressive minifier would. The output is safe to ship rather than merely small.
4. 4Check what was left untouchedContent inside pre, textarea and script is preserved exactly, because reformatting it would change what it means. The notes say when that applied.
5. 5Use the Indent control for your house styleTwo spaces, four spaces or a tab, applied as soon as you pick it.
6. 6Copy or download the resultThe buttons under the output put it on your clipboard or save it as a file, and each one says exactly what it will copy or download. Any note about something the tool changed or deliberately left alone is shown with the result rather than hidden.

About this tool

Tidy HTML into indented structure, or strip it down for size — without changing what the page renders. That last clause is the whole tool: whitespace in HTML is visible, so a formatter that freely re-wraps markup quietly edits the page.

Concretely: a line break between two inline elements renders as a space, so <span>a</span><span>b</span> is never split, while a break next to a block element renders as nothing, so <div>s and <p>s are indented freely. Content of pre and textarea is whitespace-preserved verbatim, and embedded scripts and styles pass through byte for byte.

Understanding the result

Formatted output indents block structure and keeps runs of inline markup together on one line. Minified output removes only the whitespace that rendering ignores — next to block boxes — and keeps the single spaces between inline content, which are load-bearing.

Real-world HTML is accepted, not just textbook HTML: optional end tags (a new <li> closes the previous one), unquoted and bare attributes, uppercase tags, even embedded PHP tags, which are kept exactly as written.

The notes report every repair: an element that was still open when an outer closing tag arrived, a stray closing tag with no opener, duplicate attributes a browser would silently drop. Each of those usually marks a real mistake in the markup, which is why they are said aloud.

Example

<div><ul><li>one<li>two</ul><p>See <b>this</b> note</p></div>

<div>
  <ul>
    <li>one</li>
    <li>two</li>
  </ul>
  <p>See <b>this</b> note</p>
</div>

Limitations

• Custom elements and anything else the tool does not recognise are treated as inline, because an unknown element could be styled display:inline — that is the guess that cannot change the page when it is wrong. The cost is that custom-element markup stays on one line.
• Embedded JavaScript and CSS are not reformatted — that is a rewrite of somebody else's code. Use the CSS formatter for stylesheets.
• This is a formatter with well-formedness repairs, not a full validator — it does not check attribute names, ARIA usage or nesting rules beyond the structural ones it repairs.
• A self-closing slash on a non-void element (<div/>) is honoured as written, although a browser would treat it as an opening tag. If your source contains that pattern, it is worth fixing at the source.

Questions