Indent: 2 spaces
The default, and what Google's HTML/CSS style guide recommends. Deep nesting — tables, nested lists, email templates — stays on screen instead of scrolling sideways.
HTML code formatter
How the formatter works, every option it exposes, and what it deliberately refuses to change. The tool is on this page too — or use the front page if you just want to paste and go.
Your HTML
0 lines
Format
Formatted
0 lines
Paste HTML on the left, then press the button.
Parser first, printer second
It is a parser and a printer, not a search-and-replace script. That distinction is why it survives real files instead of only clean examples, and it is what this page is about.
What "formatted" means here
Three things happen, in this order.
Parsing. The input is read into a tree of elements. This step is what lets the tool
handle a > inside an attribute value, a comment containing markup, or a
<script> block full of angle brackets, without mistaking any of it for structure.
Repair. Real-world HTML leaves tags open. A <li> with no
</li> is legal and common; so is a <p> closed implicitly by the next
block element. The parser applies the same implicit-close rules a browser does, so the tree matches what
the browser will build rather than what a strict XML parser would reject.
Printing. The tree is written back out. Each level of nesting adds one indent unit. Elements whose children are all text or inline tags, and which fit comfortably on one line, are kept on one line. Everything else is broken out.
Options, and when to change them
Indent: 4 spaces
More visual separation per level. Worth it in flat documents where you want the structure to shout, and in teams whose other languages already use four.
Indent: tab
One character per level, displayed at whatever width each person's editor is set to. The accessible choice: someone who needs a wide indent can have one without changing the file.
Keep comments
On by default. Turn it off to see the markup without annotation, or to strip a template's build comments before handing the file over.
Wrap long attributes
Puts each attribute on its own line once a tag gets too wide. Useful for framework-style markup where a single element carries a dozen classes and data attributes.
Send result back to input
Moves the output into the left panel. The quickest way to chain operations: format to read it, then minify the same file.
What it deliberately does not touch
A formatter that rewrites more than whitespace is a formatter you cannot trust with production files. This one leaves the following exactly as it found them:
- The contents of
<pre>and<textarea>, where whitespace is content. - The contents of
<script>and<style>, which are re-indented as a block but never reformatted internally. - Attribute values, including their capitalisation and internal spacing.
- The order of attributes, elements and text.
- Character entities —
stays .
One thing it does normalise: tag names are lower-cased and attribute values
are wrapped in double quotes. Both are safe rewrites in HTML5 and both are near-universal conventions, but if
you need a byte-identical round trip, use Validate instead — it reports without rewriting.
Questions about this tool
Does it work on a fragment, or does it need a whole document?
A fragment is fine. Paste a single <div>, a table row, a component template — anything that parses. The doctype and <html> checks in Validate mode only run when the input looks like a full document, so you will not get nagged about a missing <title> on a snippet.
Can it format HTML that contains template syntax?
Usually, yes. Handlebars, Liquid, Jinja, Blade and similar syntaxes live inside text nodes or attribute values, so the parser treats them as content and passes them through untouched. Where it struggles is template syntax that spans structure — a loop that opens a tag in one branch and closes it in another. That is not valid HTML in the first place, so no HTML parser can make sense of it.
Why did my one-line file become 400 lines?
That is the point: minified HTML is one long line, and beautifying it puts every element back on its own row. The character count barely changes — you are adding newlines and leading spaces, which is typically 15 to 40 percent more bytes. The size readout under the panels shows you exactly how much.
Is the output stable if I run it twice?
Yes. Formatting an already-formatted file gives you back the same file. That matters if you are putting the output in version control, because it means the tool cannot generate noise diffs.
Related tools
HTML Beautifier
Turn minified HTML back into readable code.
OpenHTML Pretty Printer
Pretty-print HTML with the indent you want.
OpenHTML Minifier
Strip whitespace and comments from HTML.
OpenHTML Validator
Find unclosed tags and broken nesting.
OpenHTML Code Cleaner
Tidy exports from CMS and email builders.
OpenHTML to JSX
Convert HTML into React-ready JSX.
OpenLearn the why, not just the how
Longer reading on formatting, indentation and minification.