What is an HTML formatter?
An HTML formatter (or beautifier) rewrites markup with consistent line breaks and indentation so the nesting of elements is visible at a glance. It is the quickest way to make sense of minified page source, HTML copied from a page builder, an email template or the output of a CMS that puts everything on one line.
This formatter reads your markup with a real tokenizer instead of regular expressions. It understands doctypes, comments, void elements such as <img> and <br>, self-closing SVG tags and optional end tags like a missing </li> or </p>. Attributes are copied exactly as written — including their quotes and any > inside a quoted value — and unclosed or mismatched tags are tolerated, so a broken snippet still comes out readable instead of throwing an error.
Formatting is whitespace-aware. Block elements such as <div>, <ul> or <section> get their own lines, while inline elements such as <a>, <strong> and <span> stay inside the text they belong to, because adding a line break between bold</b>text would insert a visible space. The content of <pre> and <textarea> is kept byte-for-byte, and <script> and <style> blocks are re-indented without touching the code itself.
How to use the HTML Formatter
- Paste your HTML into the input box, or click Sample to load a minified example page.
- Choose the indentation: 2 spaces, 4 spaces or tabs. The choice is remembered on this device.
- Optionally wrap long tags so each attribute sits on its own line, and decide whether blank lines from the source are kept.
- Copy the formatted markup or download it as
formatted.html. Everything runs in your browser — nothing is uploaded.
Example
A single line such as <ul class="menu"><li><a href="/">Home</a></li><li><a href="/blog">Blog</a></li></ul> becomes:
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ul>What the formatter changes — and what it never touches
- It adds or removes whitespace only around block-level elements, where browsers ignore it.
- Short elements such as
<li><a href="/">Home</a></li>stay on one line; longer ones are split. <pre>,<textarea>, attribute values and text inside inline elements are left exactly as written.- Tag and attribute names keep their original case, so SVG attributes like
viewBoxsurvive. - Optional end tags you omitted are not added — the formatter shows your markup, it does not rewrite it.
Frequently Asked Questions
Will formatting change how my page looks?
It should not. Line breaks are only inserted next to block-level elements, where whitespace has no visual effect, and inline runs such as <b>Hello</b>, world keep their original spacing. Elements that preserve whitespace (<pre>, <textarea>) are copied unchanged.
Does the formatter fix invalid HTML?
No. It tolerates unclosed and mismatched tags so you always get readable output, and the indentation often makes the mistake obvious, but it does not add missing tags or remove stray ones. Use the W3C validator if you need a full conformance check.
Why are some attributes put on separate lines?
When Wrap attributes is enabled, any tag with more attributes than the threshold is split so each attribute gets its own line. This keeps long <img>, <input> or <a> tags readable and produces cleaner diffs in version control.
Is the JavaScript or CSS inside my page formatted too?
The contents of <script> and <style> are re-indented as a block to match the surrounding HTML, but the code itself is not rewritten. That keeps template literals, JSON-LD and inline CSS working exactly as before.
How do I make HTML smaller instead?
Use the HTML Minifier to remove comments and redundant whitespace before deploying. To show HTML as code in a blog post rather than render it, run it through the HTML Escape Tool.