Beautify HTML online with Calzyra's free HTML Beautifier. Format messy or compressed HTML into readable, properly indented code you can copy into your project.
Formatted HTML will appear here
Paste HTML in the input panel and it formats automatically
Load sample data to get started
What this tool can do
Indent by Nesting
Two spaces per level, matching the XML Formatter
Attributes Preserved
IDs, classes, URLs and quoting stay as written
Void Elements Kept
img, br and input are never given a closing tag
Comments & Doctype Kept
HTML comments and the doctype pass through
Inline Text Intact
Text with inline tags stays on one line
Script & Style Untouched
Embedded JavaScript and CSS are copied verbatim
Copy & Download
Copy the formatted source or save it as .html
Fragments Welcome
Partial HTML formats without a full document
Methodology and approach
The beautifier parses the markup and writes it back out with two-space indentation, keeping void elements, attributes, comments and embedded script or style content exactly as written - the same engine the HTML Formatter runs.
HTML that arrives from a minifier, a build step or a copied view-source is often written on one very long line, or indented by whichever editor last touched it. An HTML beautifier rewrites that source with consistent indentation and line breaks so the nesting of the document is visible again: which elements hold which, where a heading ends and a paragraph begins, and which attributes ride on which tag.
This tool reads the markup with an HTML-aware parser rather than a pattern that only inserts a line break between two angle brackets. It knows the difference between a void element and an element with content, between a tag and a less-than sign in plain text, and between markup and the JavaScript or CSS inside a script or style element - so the structure it prints is the structure the document actually has. It is the same beautification engine the HTML Formatter page runs.
Paste the HTML into the input panel on the left. It is parsed and beautified automatically as you type, and Ctrl+Enter forces a re-run at any time. The beautified markup appears in the output panel on the right, with a status line reporting how many elements were found and how many lines the result spans.
HTML parsers recover from markup that XML parsers reject, and so does this tool: a new list item closes the previous one, a block element closes an open paragraph, and elements still open at the end of the input are closed the way a browser closes them. The one thing it reports is a start or end tag that is never finished - an unclosed quote on an attribute, a tag with no ">" - because there is no way to guess what the rest of that tag was meant to be. When that happens your input is left untouched and the output panel says where the problem is.
When the result looks right, Copy puts the beautified source on the clipboard - the actual markup, indentation included - and Download saves it as a .html file. Everything runs in your browser; nothing is uploaded.
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Example Page</title></head><body><main><h1>Hello World</h1><p>This is a sample paragraph.</p></main></body></html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example Page</title>
</head>
<body>
<main>
<h1>Hello World</h1>
<p>This is a sample paragraph.</p>
</main>
</body>
</html>Yes. A doctype and a single root element are not required: a pasted snippet, several sibling elements and loose text between them are all beautified as they are written. Elements left open at the end of the fragment are closed implicitly, the same recovery a browser performs, so the output reads as a complete tree even when the input stopped in the middle.
A closing tag with nothing left open to close it - the stray </div> that survives a partial cut-and-paste - is passed through unchanged rather than dropped, so nothing you pasted disappears from the result.
<section class="card"><h2>Pricing</h2><p>Start free, upgrade when you need to.</p><a href="/signup">Create an account</a></section><section class="card">
<h2>Pricing</h2>
<p>Start free, upgrade when you need to.</p>
<a href="/signup">Create an account</a>
</section>Readable markup is easier to inspect, understand, debug and maintain. Reading minified HTML from view-source or a network response stops being a guessing game when the structure of the page is visible. Reviewing a template or a CMS export before editing it is safer when the nesting is clear before a single change is made, and debugging a layout by confirming which element is really inside which takes seconds rather than patience. Markup prepared to share in a pull request or a support ticket slows everyone down when its source is unreadable.
Beautifying changes the source layout, not the document's content: the same elements, in the same order, with the same attributes and the same text. Browsers collapse the whitespace between elements when they render, so the indentation added around block-level markup does not change what a visitor sees.
The two tools do opposite jobs. A beautifier adds indentation and line breaks so the nesting of a document is visible; a minifier removes that formatting overhead to make the source smaller, collapsing runs of text whitespace to the single space a browser renders. Both parse the markup with the same HTML-aware parser and preserve attributes, comments, text spacing and embedded script or style content - they differ only in the whitespace they write between the structural nodes.
Use the beautifier when the next step is reading, reviewing or debugging the markup, and the minifier when the next step is shipping it. A document can travel between the two freely: beautify it to work on it, minify it again when the work is done.
Common questions about this tool