HTML Formatter
Beautify, Minify And Check Your Markup

What An HTML Formatter Does

A browser never refuses a page. Therefore an unclosed paragraph, a list item with no end tag and a table cell left open all render anyway, because the parser quietly fills the gaps as it reads. So the markup behind a live site is usually looser than the source a person would like to work with.

That gap is the job this HTML formatter exists for. Because it reads your markup with the same rules a browser uses, it closes the tags you left implied, fixes the indent, lines the attributes up and hands back something you can actually read.

Alongside the tidy-up it keeps a note of every decision. For example an implied list end, a void element written with a closing slash, or a stray tag with no partner each land in a checks table, with the line and the column where they sit.

It builds no page and runs no script, so a block of markup copied from a client site is read exactly like your own. Moreover a <script> or a <style> block is carried across untouched, because its contents are not HTML and reformatting them would break them.

Nothing leaves this tab either. Hence a template under an NDA, a half-finished component or a page you would never publish are all safe to paste.

How An HTML Formatter Reads Your Markup

The first pass turns the text into tokens. A start tag, an end tag, a run of text, a comment and the doctype are all different things, and the reader decides which it is looking at one character at a time.

The second pass arranges those tokens into a tree, which is where the shape gets checked. The rulebook here is the WHATWG HTML parsing specification, the same document every browser follows.

The order explains most of what the checks table says. Because some tags may be left open on purpose, a fresh <li> ends the one before it and a new row closes the last cell. So the tree the reader builds is tidier than the text you fed it.

Three kinds of element get special handling. First, a void element such as <br> or <img> never takes a closing tag. Second, a raw-text element such as <script>, <style> or <textarea> keeps its contents verbatim. Third, <pre> keeps its whitespace, because in that one element whitespace is content.

Case is a decision rather than a rule. By default the formatter leaves your tag and attribute names exactly as they are, so an inline <svg> keeps viewBox and linearGradient spelled the way SVG demands. Still, a single switch lowercases everything when you want the plainer HTML style.

Why Beautify And Minify Are The Same Reader

Both modes read the markup the same way and build the same tree. Then one mode prints that tree across many indented lines, and the other prints it with the gaps between tags removed.

So the difference is only the last step. Because minifying collapses runs of whitespace rather than deleting them, a space between two inline tags is kept, since dropping it would glue two words together on the page.

That shared reader is why the checks are the same in both modes. A missing end tag is filled in whether you are beautifying or minifying, and the note appears either way.

In short, beautify when you want to read or edit the markup, and minify when you want to ship it. For a page you are about to serve, the dedicated HTML minifier does the same squeeze with a few more options.

The Checks It Runs, And What Each Note Means

The first note is an implied end tag. Because a <li>, a <p> or a table row may close itself, the formatter fills the end tag in and tells you where, so the tree is explicit even when your source was not.

The second is a void element written with an end tag. A </br> or a closing tag on an <img> means nothing, so the reader drops it and notes the spot rather than leaving a confusing pair.

The third is a close tag with no partner. When an end tag matches nothing on the stack, the reader cannot pair it, so it flags the line instead of guessing which open tag you meant.

The fourth is an element that never closes. If a <div> or a <span> runs to the end of the file still open, the note names the tag that started it, because that is the one you need to find.

The fifth is a duplicate attribute. Two class values on one tag mean a browser keeps the first and ignores the second, so the reader points at the pair before it quietly changes your styling.

The sixth stops everything, and it is the only one that does. A comment, a doctype or a <script> block with no end runs off the edge of the file, so the reader cannot finish and nothing is printed until you close it.

What This HTML Formatter Will Not Do

It will not render your page. Nothing here loads an image, runs a script or applies a stylesheet, so the markup cannot act on the tab while you read it.

It will not fully validate the markup. A formatter checks the shape, not the rulebook, so a <div> nested inside a <span> or a heading level skipped from two to four comes out neatly indented and still wrong. Tidy is not the same as valid.

It will not fix your code for you beyond the shape. A guessed end tag is filled in and noted, because that is what reading the tree requires, but the formatter never rewrites your attributes or reorders your content.

It will not touch what is not HTML. The contents of a <script>, a <style> or a <pre> are copied across exactly, so run those through the JavaScript validator or the CSS validator when you want them checked too.