HTML Formatter

HTML that came out of a template engine, a CMS field or a page's view-source is usually one wall of markup with no line breaks worth the name. Reading it means counting angle brackets to work out which div closes which.

This tool indents the structure so the nesting is visible, and minifies in the other direction when you want the smallest thing to paste into a page. What it will not do is rewrite your markup: attributes come out in the order you wrote them, quoted the way you quoted them, and the contents of pre, textarea, script and style are never touched.

In HTML, whitespace is content. The space in </b> <i> is a word gap you can see on the page; the newline between </div> and <section> is not rendered at all. A formatter that treats those as the same thing produces markup that reads beautifully and renders wrong — words run together, or a gap opens between an icon and its label.

The rule here is that only elements whose children are all block-level get broken across lines, because that is the only place where the whitespace being replaced was never rendered. An element that contains text, or an inline element such as a, span, b, img or svg, is copied out exactly as written and put on one line of its own. So <p>Hello <b>bold</b> world</p> comes back with its spacing intact, while the divs and sections around it get indented.

The trade-off is honest: a div that mixes a sentence with a nested block will be left as you wrote it rather than tidied. Guessing there would be the one place a formatter can silently change a page.

Four of them. Inside pre, every space and newline is rendered — that is the entire point of the element. Inside textarea, the content is the field's initial value, so an added newline is a change to what the user sees in the box. Inside script and style, the content is not HTML at all; it is a program or a stylesheet, and it can contain angle brackets and quotes that mean nothing to a markup parser.

All four are read as raw text here and copied out byte for byte, which also means a script containing document.write("</div>") does not derail the parse. Void elements — br, img, input, meta, link, hr and the rest — are treated as complete on their own; no closing tag is invented for them, and none is expected.

On hand-written markup, typically 10–25%: comments, the indentation of every line, and the line breaks between tags. The saving is nearly all whitespace, which is why the honest figure is the one after gzip or brotli, where repeated indentation compresses well already and minifying adds a few percent rather than a fifth.

The whitespace rules are where the care goes. Between two block-level tags it is deleted outright, since nothing renders it. Between inline content it collapses to a single space, which is exactly what the browser would have drawn anyway. Inside a line of text it is left alone entirely — a run of spaces between two words is visible under white-space: pre-wrap, and a minifier cannot see your stylesheet. The one assumption made is that elements have their default display: restyle a div to display:inline and the gap between two of them is one this cannot know to keep.

Comments go by default, with two exceptions kept deliberately: conditional comments, <!--[if …]>, which are markup a browser may act on, and comments beginning <!--!, the widely used convention for a licence header that must survive minification.

Most real HTML is not well formed and browsers do not mind. A <li> without a closing tag ends when the next <li> starts; a <p> is closed by the block that follows it; table rows and cells close each other. All of that is handled the way a browser handles it, so a list written without closing tags formats as a list rather than as a staircase of ever-deeper nesting.

Faults that cannot be resolved that way are reported rather than repaired. An element that is never closed and a closing tag that matches nothing open are both listed with a line number, and the characters are kept in the output either way — a formatter that deletes something you wrote is worse than one that hands it back with a note. End tags the spec makes optional, such as the one on a list item, are not reported at all, because they are not mistakes.