HTML Formatter
Understand HTML Formatter
This formatter indents HTML by nesting depth, or strips it down to one line with the comments removed.
How it works
The markup is split into tags, comments, and text runs, and the indent level rises on each opening tag and falls on each closing one. Void elements (br, img, input, meta, link) never open a level because they have nothing to close, and inline elements (a, span, strong, code and the rest) are deliberately kept flat so a sentence is not broken into one word per line. Minify does the reverse: comments are removed and the whitespace between tags is collapsed.
When to use it
- Reading a page's source after it has been minified or emitted by a build tool.
- Untangling a nested component or an email template to find where a div is unclosed.
- Cleaning up markup pasted out of a WYSIWYG editor or a CMS field.
- Checking the structure of a fragment before pasting it into a template.
Watch out for
- Whitespace between inline elements is rendered. Collapsing </span> <span> to </span><span> removes a space the reader can see, so minified output is not always visually identical.
- This is a text pass, not an HTML parser. Content inside script, style, pre, and textarea is treated as ordinary markup, so beautifying a page will re-indent code samples and preformatted text where the spacing is meaningful.
- Minify removes every comment, including conditional comments an email template relies on for older Outlook and any marker your tooling reads.
- Unbalanced tags produce strange indentation rather than an error — output that steps steadily further right usually means a tag was never closed.
Not the right tool for: Minifying HTML for production. A build-time minifier parses the document and knows which whitespace is safe to remove; do that in the pipeline rather than by pasting.
Frequently Asked Questions
Can I format just a snippet, not a full document?
Yes — paste any fragment (a div, a partial template, or even a single element). The formatter does not require a full DOCTYPE/html/head/body structure.
Does this handle Jinja/Handlebars/Mustache templates?
Template syntax ({{ }}, {% %}, {{{ }}}) is preserved as-is since the formatter treats it as text content. The HTML structure around template tags is formatted normally.
What is the difference between HTML minification and gzip?
Minification removes comments, whitespace, and optional closing tags from the source HTML, typically saving 5–15%. Gzip compresses the minified output further (usually 60–80% additional). Both should be used for production — minify first, then gzip via server compression.
How to Use HTML Formatter
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.