Beautify, validate, and minify HTML with proper indentation. Instant syntax highlighting and error detection.
HTML (HyperText Markup Language) is the standard markup language used to structure content on the web. It describes a page using nested elements — tags like <div>, <p>, <img>, and <table> — that browsers parse and render into the layout, text, images, and interactive controls users see.
HTML is forgiving by design: browsers try to render even malformed markup by auto-correcting missing tags or fixing bad nesting. That leniency is convenient for viewing pages, but it also means messy, inconsistent, or auto-generated HTML can accumulate over time — especially when it comes from a CMS, a minifier, a build tool, or copy-pasted snippets — making the underlying source hard to read and maintain.
An HTML Formatter takes raw HTML — whether it's minified, inconsistently indented, or generated by a template engine — and rewrites it with clean, consistent indentation so the document structure and element nesting are easy to follow at a glance. It can also do the reverse: strip out unnecessary whitespace to shrink the markup for production use.
This HTML Formatter beautifies markup with a configurable indent size, minifies HTML down to a compact form, and runs a basic structural validation pass — all inside a Monaco-powered editor with HTML syntax highlighting, running entirely in your browser. You can type or paste HTML directly, upload an .html/.htm file from disk, and copy or download the result when you're done.
Paste HTML into the input editor, type it directly, upload an .html or .htm file, or click "Sample" to load a ready-made example.
Pick 2, 4, or 8 spaces from the "Indentation" dropdown in the Actions panel — this controls how nested elements are indented when formatting.
Click "Format / Beautify HTML" to pretty-print the markup, "Minify HTML" to compact it, or "Validate HTML" to check its structure and get a formatted result if it parses cleanly.
The output editor shows the resulting HTML along with a Valid/Invalid badge and a status message describing what happened.
Use "Copy Output" to copy the result to your clipboard, or "Download HTML" to save it as a .html file.
Forgetting a closing tag, or closing elements out of order (e.g. <b><i>text</b></i>), doesn't always throw a hard error — browsers silently repair the structure — but it can leave elements nested differently than you intended. Formatting the HTML makes mismatched nesting visible as unexpected indentation.
Void elements like <br>, <img>, <input>, <hr>, and <meta> never have a closing tag or wrap content. Writing <br></br> or <img src="x.png"></img> is unnecessary and can confuse the formatter's indentation of surrounding content.
Literal &, <, or > characters inside text content should be written as &, <, and >. An unescaped & (e.g. "Terms & Conditions") or a stray < can be misread as the start of an entity or a tag.
Attribute values that contain spaces must be quoted. class=foo bar is parsed as two separate attributes (class="foo" and bar), not a class with two words — it must be class="foo bar".
If the same attribute (e.g. class or id) appears twice on one tag, only the first occurrence is used by the browser; the duplicate is silently ignored rather than flagged as an error.
Validation here checks that the document can be structurally parsed, not that it follows semantic HTML rules. Browsers parse HTML very leniently and auto-correct most structural problems, so severely malformed markup can still come back "Valid" after being silently repaired.
A dense, single-line HTML document beautified with 2-space indentation so the structure is easy to follow.
Input
<!DOCTYPE html><html><head><title>Demo</title></head><body><header><h1>Hello</h1></header><main><p>Welcome to our site.</p></main></body></html>
Output
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<header>
<h1>Hello</h1>
</header>
<main>
<p>Welcome to our site.</p>
</main>
</body>
</html>Indented HTML compacted with "Minify HTML." Note that this is a lightweight, regex-based minifier: it collapses whitespace runs and the gaps directly between tags, but it does not strip spaces that sit inside text content.
Input
<div>
<p>
Hello, world!
</p>
</div>Output
<div><p> Hello, world! </p></div>
Code blocks and other preformatted content inside <pre> are left exactly as written — including their internal line breaks and spacing — while the surrounding tags are still indented normally.
Input
<div><pre>
function add(a, b) {
return a + b;
}
</pre></div>Output
<div>
<pre>
function add(a, b) {
return a + b;
}
</pre>
</div>No. This tool runs entirely client-side in your browser using a Monaco editor and a local formatting library. Your markup never leaves your device or gets sent to a server.
Formatting (beautifying) adds consistent indentation and line breaks so the document structure is easy to read. Minifying collapses whitespace between and around tags to shrink the markup for production, at the cost of readability.
HTML validation here uses the browser's built-in HTML parser, which is intentionally lenient — it auto-corrects many structural issues (like unclosed or mismatched tags) instead of rejecting them, the same way a browser would when rendering the page. This checks that the document can be parsed, not that it follows best practices.
No. Browsers already collapse whitespace between HTML tags when rendering (except inside <pre> and <textarea>), so adding or removing that whitespace does not change the rendered output — it only changes the readability of the source.
No. Content inside these elements is treated as preformatted and preserved exactly as written, since whitespace inside them is often meaningful (for example, indentation in a code sample).
2, 4, or 8 spaces, selectable from the Indentation dropdown in the Actions panel. This applies to "Format / Beautify HTML" and to the formatted output produced by "Validate HTML."
You can upload .html or .htm files. The contents are loaded directly into the input editor for formatting, minifying, or validation.