HTML Formatter
Whitespace between inline elements is rendered
A space between two inline elements is a real space on the page, so this keeps short inline elements such as links and spans on one line rather than indenting them onto their own. Content inside pre, textarea, script and style is left exactly as written.
The formatter indents HTML according to its nesting, with two rules that stop a formatter from changing what the page renders: whitespace-sensitive elements are left exactly as written, and short inline elements are kept on one line rather than being pushed onto their own.
How it works
HTML whitespace is not free. A newline between two inline elements collapses to a single space that the browser renders, so a formatter that indents everything can add visible gaps that were not in the original.
- Void elements (img, br, input, meta, link and the rest) never open a nesting level, because they have no closing tag.
- pre, textarea, script and style have their contents emitted verbatim. Reindenting a pre block changes what it displays.
- Inline elements such as a, span, strong and code are kept on one line with their text, so no space is introduced either side.
- Text between tags is collapsed to single spaces, which matches how the browser treats it.
This reformats markup you already have; it does not correct it. Unclosed tags, mis-nested elements and invalid attributes all pass through, with indentation drifting where the nesting is wrong.
Examples
A one-line fragment
HTML
<div class="card"><h2>Title</h2><ul><li>One</li></ul></div>
Result
Nested indentation, one element per line
Each block element opens a level. The list item sits two levels in, under the list, under the div.
An inline link inside a paragraph
HTML
<p>Some <a href="#">link</a> text.</p>
Result
The anchor stays on one line with its text
Breaking it onto three lines would put whitespace either side of the link, which the browser renders as real spaces around it.
A pre block
HTML
Preformatted text with deliberate indentation
Result
Emitted unchanged
Everything inside pre is displayed literally, so reindenting it would alter what the visitor sees.
Frequently asked questions
Why does it leave my links on the same line as the text?
Because whitespace between inline elements is rendered. Putting an anchor on its own line adds a newline before and after it, and the browser collapses each to a visible space, so the formatted page would show gaps around the link that the original did not have.
Will it fix my broken HTML?
No. It reindents what you give it. An unclosed div stays unclosed, and the indentation below it keeps increasing, which usually makes the problem obvious. For actual correction you need a parser that reconstructs the tree, which changes your markup rather than formatting it.
Why is the content of my script tag not indented?
Because script, style, pre and textarea are whitespace-sensitive or contain another language entirely. Reindenting JavaScript inside a script tag with an HTML formatter is how template literals get corrupted. Use the JavaScript beautifier on that content separately.
Does it minify as well?
No, it only formats. HTML minification involves judgement calls about which whitespace is safe to drop, and getting those wrong changes the rendered page in ways that are hard to spot. A build-time minifier with a test suite is the right place for that.
Are attributes reordered or rewritten?
No. Tags are emitted exactly as they appear, including attribute order, quoting style and any inline event handlers. Only the whitespace between tags changes.