What is the HTML Formatter?
The HTML Formatter re-indents HTML so the nesting of elements is visible, and can minify it again to strip whitespace before deployment. It is useful for making generated or hand-tangled markup readable.
HTML is forgiving about whitespace between tags, which means markup can be emitted as one long line without changing how it renders. That is efficient to transmit and very hard to read or review.
Formatting reintroduces line breaks and indentation that reflect the document tree, so you can see which elements are nested inside which. This makes unclosed tags and misplaced nesting far easier to spot.
One caveat matters: whitespace is not always insignificant in HTML. Inside pre and textarea elements it is preserved and rendered literally, and between inline elements it can affect spacing. A formatter must leave those cases alone.
How to use the HTML Formatter
- Paste your HTML. Any fragment or full document works, including markup copied out of a browser's element inspector.
- Click Format. The markup is re-indented according to its nesting depth.
- Or click Minify. This removes insignificant whitespace between tags to reduce file size.
- Copy or download. Take the formatted markup back into your editor, or save it as a file.
Worked examples
Formatting collapsed markup
Minified markup hides the document structure entirely. Indentation makes the nesting explicit.
<div class="card"><h2>Title</h2><p>Body text</p><a href="/more">Read more</a></div><div class="card">
<h2>Title</h2>
<p>Body text</p>
<a href="/more">Read more</a>
</div>Whitespace that must be preserved
Content inside pre is rendered exactly as written, so a formatter must not re-indent it.
<pre>
line one
line two
</pre>Left untouched, re-indenting this
would visibly change how the page renders.Common use cases
- Reading generated markup. Output from a template engine or CMS is often unindented; formatting makes it reviewable.
- Debugging layout problems. Many layout bugs are really nesting bugs, and they become obvious once indentation reveals the tree.
- Preparing markup for code review. Consistently formatted HTML produces smaller, clearer diffs.
- Minifying before deployment. Stripping whitespace reduces payload size for pages served without a build step.
Features and limitations
- Formats and minifies from the same interface.
- Preserves the contents of pre and textarea elements, where whitespace is significant.
- Handles self-closing and void elements such as img, br, and input.
- Leaves inline script and style blocks intact rather than attempting to reformat their contents.
- It is a formatter, not a validator, it will not tell you that a tag is unclosed, though the resulting indentation usually makes it visible.
Frequently asked questions
Will formatting change how my page renders?
In almost all cases, no. The exception is whitespace between inline elements, where added line breaks can introduce a rendered space. The formatter preserves pre and textarea content, where whitespace is always significant.
Does it validate my HTML?
No. It formats what you give it. For conformance checking, use a dedicated validator such as the W3C service.
Can it handle template syntax?
Template expressions such as Handlebars or Jinja tags are generally passed through, but heavily interleaved template logic can confuse the indentation. Format the rendered output when in doubt.
Is minified HTML worth it?
The saving is modest once gzip or Brotli compression is applied, since those already handle repeated whitespace well. It is worth doing as part of a build, but rarely worth much manual effort.
Is my markup uploaded anywhere?
No. Formatting happens in your browser, so unreleased markup stays local.
All processing happens locally in your browser, your data never leaves your device.