HTML Formatter

How to use the HTML Formatter

1. Paste your HTML — a fragment or a whole document, both work.
2. Choose an indent width, then press Format to expand the markup or Minify to collapse it.
3. Copy the output or download it as an .html file.

What the formatter preserves

Naïve indenters break pages by reformatting content where whitespace is significant. This one leaves four kinds of content alone: <pre>, <textarea>, <script> and <style>. Their inner content is re-indented as a block but never re-wrapped, so preformatted text keeps its line breaks and scripts stay syntactically intact.

Void elements — <br>, <img>, <input> and the rest — never increase the indent level, because they have no closing tag. Getting this wrong is what causes indentation to drift steadily to the right in most quick-and-dirty formatters.

Formatting reveals structural bugs

Because the indent level tracks open and closed tags, an unbalanced document shows up immediately: the output either drifts rightwards forever or marches back past the left margin. The tool counts the imbalance and tells you how many tags are unaccounted for.

Note that HTML has optional closing tags. <li>, <tr> and <p> can legally be left open — browsers close them implicitly. This formatter treats them literally, so a document using that style will be reported as unbalanced even though it renders correctly.

A caution on minifying

Whitespace between inline elements is visible. The space in <b>bold</b> <i>italic</i> is a real space on screen; removing it joins the words. Minified output should be checked visually rather than trusted blindly, especially in paragraphs and navigation bars. For production, a build-time minifier that understands your CSS display rules is a safer choice.

Frequently asked questions