HTML Formatter
Beautify HTML with Prettier: consistent indentation, one element per line and embedded CSS and JavaScript formatted too. Choose 2, 4 spaces or tabs.
Runs entirely in your browser. Your data is never uploaded.
Related Tools
View AllWhat is HTML Formatter?
The HTML Formatter rewrites HTML with clean, consistent indentation using Prettier, the formatter used by most front-end projects. Inline <style> and <script> blocks are formatted as CSS and JavaScript as well.
How to use HTML Formatter
- Paste your HTML into the input box or click Load sample.
- Choose the Indentation.
- Click Format (the output also updates while you type).
- Copy or download the result.
Example
<div><p>Hi<b>x</b></p><img src=a.png alt=""></div>
<div> <p>Hi<b>x</b></p> <img src="a.png" alt="" /> </div>
When to use HTML Formatter
Use it to clean up HTML from CMS exports, email templates or generated markup before editing or reviewing. It is a formatter, not a validator: for unclosed tags or duplicate ids use the HTML Validator. Very large documents may take a moment because Prettier runs in your browser.
How HTML Formatter works
The code is formatted with Prettier 3 (standalone build) and its HTML, CSS and Babel plugins, loaded on demand. Prettier parses the markup into a tree, then prints it so lines fit in 80 columns, quoting attributes and adding /> to void elements. Whitespace-sensitive inline elements are kept together so the rendered page does not change. Syntax errors are reported with Prettier's line and column.
Common Use Cases
- Making minified or one-line HTML readable
- Normalising templates before code review
- Formatting HTML snippets for documentation
- Cleaning markup copied from a WYSIWYG editor
Security Note
Everything runs locally in your browser; the code you paste is not uploaded.
FAQs
Which style rules are used?
Prettier's defaults: 80-character print width, double-quoted attributes and the indentation you select.
Will formatting change how the page looks?
Prettier respects whitespace sensitivity of inline elements, so rendering should stay the same.
Does it fix invalid HTML?
No. It formats what browsers would parse; use the HTML Validator to find structural mistakes.