HTML Formatter

Indentation is how you see the tree

HTML is a tree of nested elements, and every hard bug in a layout is ultimately a question about that tree: which element is this div actually inside, where does that section really close, why is this paragraph inheriting styles from a parent I did not expect. Minified markup makes those questions unanswerable by inspection, because the nesting exists but is invisible. Indentation renders the tree directly onto the page — each level of nesting becomes a level of indentation, and a div that closes in the wrong place shows up as a visibly wrong indent. Most misnested-tag bugs that take an hour to find in minified markup take about four seconds to spot once the file is formatted.

The inline whitespace trap

There is one genuine hazard in reformatting HTML that catches people out, and it is worth knowing before you reformat a template you care about. HTML collapses runs of whitespace into a single space, but it does not remove it entirely — and between inline elements, that single space is rendered. So two spans sitting directly against each other with no gap will render with no gap, but if a formatter puts them on separate lines, the newline becomes a space and a visible gap appears. This is why reformatting a navigation bar or a row of inline-block buttons can mysteriously introduce four-pixel gaps between them. Block-level elements are immune, since their whitespace is not rendered; it is only inline content that bites.