HTML Formatter
Beautify and indent HTML for readability — turn messy or minified markup into clean, properly nested code with 2-space or 4-space indentation.
About this tool
The HTML Formatter takes messy, minified, or inconsistently-indented HTML and turns it into clean, readable code. Paste your HTML and it automatically re-indents nested elements, preserves <script> and <style> blocks verbatim, keeps inline text on a single line, and correctly handles HTML5 void elements like <br>, <img>, and <input> (no spurious closing tags).
Example: a single-line blob like <div><p>Hello</p><ul><li>A</li><li>B</li></ul></div> becomes a properly nested tree where each child is indented one level deeper than its parent.
Click 2-space or 4-space to control indentation width. The stats panel shows element count, unique tag names, attribute count, and the top three most-used tags so you can quickly assess the structure of any page you paste in. Switch to Minify mode above to compress HTML for production — no separate tool needed.
FAQ
Does it handle HTML5 void elements correctly? ›
Yes. Tags like <br>, <img>, <input>, <meta>, <link>, <hr>, <source>, and <wbr> are recognized as self-closing and never get a closing tag. Boolean attributes (disabled, readonly, checked, required, async, defer, etc.) are written without a value.
What happens to <script> and <style> blocks? ›
Their content is preserved exactly as-is — no re-indentation, no whitespace changes. The same applies to <pre> and <textarea> elements, because changing whitespace inside them would alter the rendered output.
How does minify mode work? ›
Minify strips all whitespace between tags, collapses multiple spaces in text to a single space, and removes line breaks while preserving the exact DOM structure. Comments, script blocks, and style blocks are left untouched aside from surrounding whitespace removal.
What happens if my HTML is invalid? ›
The formatter uses the browser's built-in HTML parser (DOMParser) which is lenient — it applies the same error-recovery rules browsers use to render real-world pages. If the input is so broken that parsing fails entirely, an error message is shown. The formatted output always reflects the parsed DOM, not the raw input string, so any parser corrections (like auto-closing unclosed tags) will appear in the result.
How is this different from the HTML Sanitizer? ›
The HTML Formatter beautifies and minifies HTML code — it changes whitespace, indentation, and attribute order but never removes tags or attributes. The <a href="/html-sanitizer">HTML Sanitizer</a> strips dangerous elements like scripts, event handlers, and iframes from untrusted input. Use the formatter to clean up code you already trust; use the sanitizer when safety is the concern.