What is an HTML formatter?

It parses your markup, then prints it again with consistent line breaks and indentation. The page renders identically. Only the reading experience changes.

The short answer

An HTML formatter reads your markup, works out its structure, and writes it back out with consistent line breaks and indentation. The page renders exactly the same afterwards. The only thing that changes is how easy it is for a person to read.

You will also see it called an HTML beautifier or an HTML pretty printer. Those are the same tool under different names, inherited from different corners of programming history.

Why the browser does not care but you should

HTML collapses whitespace. A newline, a tab and forty spaces between two tags are all treated as a single space — or as nothing at all, depending on context. That is a deliberate feature of the language: it means you can lay out your source however you like without affecting the rendered page.

The consequence is that HTML files drift. Nothing breaks when the indentation is wrong, so nothing forces anyone to fix it. Over a few years of edits by different people with different editors, a file ends up with three indent styles, a few thousand-character lines and no reliable relationship between how the code looks and how it is nested.

A formatter restores that relationship. After formatting, horizontal position on the screen means depth in the document. That single property is what makes the difference between reading markup and decoding it.

What separates a real formatter from find-and-replace

You could try to indent HTML with regular expressions. People do. It works until it does not, and it fails in ways that are hard to notice, which is the worst kind of failure.

A proper formatter parses first. It builds a tree of elements, and it knows that:

a > inside alt="a > b" is text, not the end of a tag;
 is a comment containing the word div, not an open element;
<br> never has a closing tag, so the next line should not be indented;
a <li> is implicitly closed by the next <li>, so the list is flat and not a hundred levels deep;
whatever is inside <pre> must survive untouched, because there whitespace is content.

Get any of those wrong and the output is either wrong or ugly. Get all of them right and formatting becomes something you can do to a production file without thinking twice.

The four operations, and which one you want

Operation	Does what	Reach for it when
Beautify	Adds line breaks and indentation	You need to read or edit the file
Minify	Removes whitespace and comments	The file is going to production
Validate	Reports structural problems	Something renders wrong and you suspect the markup
Clean	Strips junk tags and attributes	Content came out of Word or a page builder

Most people arrive wanting the first one and discover they also needed the third.

A worked example

Here is a fragment in the state it usually arrives in: exported from something, all on one line, quotes stripped, closing tags omitted where the spec allows.

As found

<section id=intro class=hero><h2>Our work</h2><ul class=list><li><a href=/a/>Alpha<li><a href=/b/>Beta</ul><p>More <a href=/about/>about us</a>.</p></section>

And after formatting with two spaces:

Formatted

<section id="intro" class="hero">
  <h2>Our work</h2>
  <ul class="list">
    <li><a href="/a/">Alpha</a></li>
    <li><a href="/b/">Beta</a></li>
  </ul>
  <p>More <a href="/about/">about us</a>.</p>
</section>

Three things happened beyond indentation. The unquoted attribute values got quotes. The omitted </li> tags were written out explicitly. And the link inside the paragraph stayed on the same line as the text around it, because breaking an inline element onto its own row would be both ugly and, in some layouts, visually significant.

Online tool or editor plugin?

Both, for different moments.

An editor plugin — Prettier, or your editor's built-in formatter — is the right answer for code you own. It runs on save, it is configured per project, and it means formatting never becomes a decision anyone has to make.

An online formatter is for everything else: markup someone emailed you, a snippet from a support ticket, a page you are inspecting on a machine where you cannot install anything, or a quick look at what a minified file actually contains. No project, no config file, no install.

The privacy question is worth asking of any online tool. This one runs entirely in your browser — the JavaScript that does the work is downloaded once and executed locally, and nothing you paste is transmitted. Not every online formatter works that way, so if you are pasting anything sensitive, check the network tab before you trust it.

Questions about this

Does formatting change what my page does?

No. Beautifying only moves whitespace between tags, and HTML ignores that whitespace. The rendered page is identical. Minifying is a different matter — it removes comments and can close up the space browsers draw between inline elements, which very occasionally shifts a layout.

Is an HTML formatter the same as an HTML editor?

No. An editor is where you write markup. A formatter is a single operation you apply to markup that already exists. Most editors include a formatter; that does not make them the same thing.

Can a formatter fix invalid HTML?

It can make the invalidity visible, which is nearly always what you want. A tool that silently 'fixes' broken markup by guessing at your intent tends to hide the real bug rather than solve it.

Why do minified files exist at all if compression already shrinks them?

Because the savings stack, and in a build pipeline they are free. Minification removes bytes that compression would otherwise have to encode, so a minified-then-compressed file is a little smaller than a formatted-then-compressed one. The gap is small — a few percent — which is why it belongs in an automated step rather than in your editing habits.

Try it on your own file

The formatter, minifier and validator are all on the front page.

Open the formatter