HTML formatter and minifier

Whitespace in HTML is not decoration

Most HTML formatters share one assumption: that the spaces and line breaks between tags are yours to rearrange. For most of a document that is true. For several specific parts of it, it is completely false — and those parts are exactly the ones people notice when they break.

Inside <pre> and <textarea>, every space and every line break is rendered exactly as written. That is the entire purpose of those elements. A formatter that re-indents the document line by line will add its indentation inside them too, and a code sample that was flush left is suddenly two, four or six spaces in — on every nested level, compounding. The same applies to anything you have styled withwhite-space: pre, which this tool detects from an inlinestyle attribute and leaves alone.

<code> is a subtler case. Browsers do not treat it as whitespace-sensitive by default, so strictly speaking a formatter is allowed to reflow it. In practice almost every stylesheet on the web gives it a monospace font and many give it white-space: pre, and what is inside it is nearly always a snippet where the spacing is the content. This tool treats it as untouchable, and says so in the panel before it formats anything rather than after.

Inline elements, and the space you cannot see

Here is the failure that is hardest to spot. These two lines do not render the same way:

<span>7</span><span>8</span> renders as78. <span>7</span> <span>8</span> renders as 7 8. A single space between two inline elements is visible text. So is a newline, because any run of whitespace in normal flow collapses to exactly one space — not to nothing.

That is why a naive pretty-printer that puts every element on its own line is dangerous. Breaking after </span> introduces a space that was not in your document. Joining two lines removes one that was. Navigation menus, breadcrumb separators, icon-plus-label buttons and inline badges all shift by a few pixels, and the diff looks like pure formatting.

This formatter never breaks a line inside a run of inline content. Text, links, spans, emphasis, images, inputs and buttons stay on one line together with the spacing they arrived with. When it indents a run that already spanned several lines, it only changes whitespace that already contained a newline — which collapses to one space no matter how wide it is, so the rendered result is provably identical. When it minifies, a run of whitespace becomes exactly one space, never zero.

Four things this HTML formatter refuses to do

It does not close void elements. <br>,<img>, <input>, <meta> and<hr> have no closing tag in HTML, and </br> is not a thing — browsers read it as a second line break. If your source wrote<br />, that form is kept; the tool neither adds the slash nor strips it.

It does not change the case of tags or attributes. This looks like harmless tidying and it is not. SVG has viewBox,preserveAspectRatio and linearGradient, all case-sensitive. Angular has [ngIf]. Vue has :class and component names that only work capitalized. Lowercasing a document breaks all three.

It does not add closing tags you never wrote. In HTML,</li>, </p>, </td> and</tr> are optional. A list written without them is correct, and writing them in is a change to your file, not a formatting of it.

It does not rewrite template syntax. A <?php ?>block, or anything else that is not markup, is copied through byte for byte and flagged, because moving code the browser never sees is how a formatter silently breaks a build.

Broken markup gets reported, not repaired

Browsers never reject HTML. They rebuild it: an unclosed <div> gets closed somewhere, a stray </section> is dropped, mis-nested<b> and <i> get reordered into something that parses. That is excellent for rendering a page and useless for finding the mistake, which is why this tool uses its own parser instead of the browser's.

When something does not add up, you get the line number, the column number, the actual line with a pointer under the offending character, one sentence about what is wrong and one about what to do. And the region involved is copied through exactly as you wrote it rather than restructured, with a note on the receipt naming it. Guessing which tag you meant to close is how a formatter turns a small typo into a moved paragraph.

Minifying without changing the page

Minified output removes the whitespace between block elements, where it never rendered anyway, and collapses whitespace inside text to single spaces. It leaves<pre>, <textarea>, <code>,<script> and <style> untouched, keeps attribute quoting as you wrote it, and keeps conditional comments even when you ask for comments to be removed — those are instructions to old browsers, not notes to yourself.

Everything happens in this tab. There is no upload endpoint, and there is a reason that matters for HTML in particular: the markup people need to reformat is usually an email template, a checkout page, an internal admin view or an exported CMS block. Those carry customer names, order numbers, internal URLs and API keys in data-attributes far more often than anyone expects. Open your browser's Network tab and paste something in — no request will appear, because there is nowhere for one to go.