HTML Formatter & Beautifier
Format and beautify HTML online with Prettier. Choose 2 or 4 space or tab indent, print width and whitespace handling. Also minify HTML and check for tag errors.
How to use HTML Formatter
- 1Paste HTML into the input box or open an .html file; Format is the selected mode.
- 2Choose the indent, print width, whitespace handling and whether each attribute gets its own line.
- 3Copy or download the result, or switch Mode to Minify or Validate to keep working on the same markup.
What makes it better
- Prettier HTML parser with 2 space, 4 space or tab indentation
- Formats inline CSS in style tags and JavaScript in script tags
- Whitespace modes: follow CSS display rules, keep all spaces or ignore them
- One-attribute-per-line option for long tags
- Minify and Validate modes on the same page, with line and column for every problem
About HTML Formatter
The HTML Formatter re-indents markup with Prettier's HTML parser, formats the CSS inside style tags and the JavaScript inside script tags, and puts every element on its own readable line. The Mode switch on the same page also minifies the HTML or validates it for parse errors, unclosed tags and duplicate ids, so you can pick any of the three jobs without changing pages. Your HTML is only treated as text: it is never run or shown as a web page.
Common uses
- Make a minified or one-line HTML export readable before you edit it by hand.
- Clean up markup pasted from a CMS, an email template or a page builder so a diff shows only real changes.
- Apply one indent style to snippets before putting them in documentation or a pull request.
- Check a template for a missing closing tag or a duplicate id before it ships.
Example
Input
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Pricing</title><link rel="stylesheet" href="/site.css"></head><body><header class="top"><nav><a href="/">Home</a><a href="/pricing" class="active">Pricing</a></nav></header><main><h1>Simple pricing</h1><p>Pay only for what you use. <strong>No contracts.</strong></p><ul><li>Starter</li><li>Team</li></ul></main></body></html>
Result
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Pricing</title>
<link rel="stylesheet" href="/site.css" />
</head>
<body>
<header class="top">
<nav>
<a href="/">Home</a><a href="/pricing" class="active">Pricing</a>
</nav>
</header>
<main>
<h1>Simple pricing</h1>
<p>Pay only for what you use. <strong>No contracts.</strong></p>
<ul>
<li>Starter</li>
<li>Team</li>
</ul>
</main>
</body>
</html>
Good to know
- The default whitespace mode follows CSS display rules, so spaces between inline elements such as links and spans are kept; strict mode never changes text spacing at all.
- Template syntax such as Jinja, Handlebars, PHP or JSX is not HTML. It can fail to parse or get re-indented in odd ways, so format the rendered output instead.
- Very large files are processed in a background worker, but a 20 MB page can still take a few seconds.
HTML Formatter FAQ
How do I format HTML online?
Paste the markup into the input box and the indented version appears next to it as you type. Pick the indent and print width in the options row, then copy the result or download it as an .html file.
Does formatting HTML change how the page looks?
Normally not. Whitespace sensitivity is set to follow CSS display rules, so the spaces that matter between inline elements stay. If the layout of a pre block or inline-block buttons matters, use the strict setting, which keeps every space exactly.
Can the HTML Formatter also minify or validate?
Yes. The Mode switch at the top of the tool changes it to Minify, which shrinks the markup and shows the bytes saved, or Validate, which lists parse errors, unclosed or mismatched tags and duplicate ids with their line and column.
What does Validate not check?
It is not a full W3C validator. It finds syntax problems, unclosed and stray tags and repeated ids, but it does not check that element or attribute names exist, that nesting is allowed, that required attributes are present or that the page is accessible.
Is my HTML sent to a server?
No. Prettier runs in your browser, and the markup is handled purely as text. Scripts inside it are never executed and nothing is rendered, so pasting an untrusted page is safe.