HTML Beautifier
Beautify, minify, and validate HTML in your browser. Configurable indent, line wrap, and <pre> preservation. No data leaves your device.
About this tool
HTML produced by frameworks, templating engines, and scrapers is often
single-line minified output that is hard to read and nearly impossible
to diff. This beautifier re-indents HTML using js-beautify,
the same library that VS Code and many other editors ship for HTML
formatting. It recognizes the block/inline nature of each element,
handles void elements (<br>,
<img>, <meta>) correctly, and
preserves the contents of elements where whitespace is significant —
<pre>, <code>,
<textarea>, and embedded
<script>/<style> blocks.
Use Beautify during development, code review, or when
auditing scraped HTML. Use Minify for production
deployment — though for build pipelines, prefer a dedicated minifier
like html-minifier-terser, which additionally shortens
attribute quotes, collapses Boolean attributes, and has safer rules for
collapsing whitespace around inline elements. The minifier here strips
comments and collapses whitespace between tags for a reasonable file
size win with minimal risk.
The Wrap option controls line length. Long inline
content or attribute lists can be wrapped at 80, 100, or 120 characters,
matching your team’s line-length convention. Disable wrapping for
machine-generated HTML that should stay on one line per element. The
Preserve <pre> option (on by default) keeps
exact whitespace inside code samples and preformatted blocks, which you
almost always want — indenting <pre> contents would
change how they render.
The Validate button runs your HTML through the browser’s native DOMParser. This catches unclosed tags, mismatched nesting, and malformed XML-style constructs. It does not check HTML5 standards compliance — for that, use the W3C Nu Html Checker. For most formatting tasks, well-formedness is what matters, and the DOMParser check is instant.
Frequently asked questions
Is whitespace inside elements preserved?
Whitespace is preserved inside elements listed as "preserved" — by default <pre>, <code>, <textarea>, <script>, and <style>. Other elements get their inner whitespace normalized during beautification. This reflects how browsers render: whitespace is significant inside <pre> and <textarea> but collapsed elsewhere.
Should I use <br> or <br />?
In HTML5, both work; the self-closing slash is ignored on void elements like <br>, <img>, <meta>, and <hr>. XHTML required the slash (<br />) and many older codebases still use it. The beautifier preserves whichever form your input uses — it does not rewrite one to the other.
Does "minify" reduce file size significantly?
For hand-written HTML with lots of formatting whitespace and comments, expect a 20-40% reduction. For templates already optimized or produced by build tooling, the savings are much smaller. For production pipelines, prefer a dedicated minifier like html-minifier-terser which also collapses attribute quotes and optimizes Boolean attributes.
Does this validate HTML5 standards compliance?
No. Validation here uses the browser’s DOMParser, which checks well-formedness only — whether the document can be parsed into a DOM. It does not check for deprecated elements, missing required attributes, or semantic correctness. For standards validation, use the W3C Nu Html Checker.
Can I beautify very large HTML files?
Yes, up to browser memory limits. Files in the low megabytes process in well under a second. For multi-MB HTML (generated reports, scraped pages), processing may take a few seconds but the browser will not freeze. Everything runs locally.