HTML Formatter

How to Use the HTML Formatter

1. 1. Paste your HTML. A whole page or a fragment both work, and the result updates as you type. The sample is a small page you can overwrite.
2. 2. Choose Beautify or Minify. Beautify puts each block element on its own line, indented; Minify removes every space a browser would not draw and, if you like, the comments.
3. 3. Set the indentation and attribute wrapping. Two spaces, four spaces or a tab. Attributes can stay on the tag's line, wrap only when a tag would run past 80 characters, or go one per line.
4. 4. Read the problem list, then copy or download. Each unclosed, mismatched or stray tag is reported with its line number, so you can fix the source before you publish it.

What Beautifying Changes — and What It Never Touches

In HTML, whitespace is not decoration. A space between two words or two inline elements is drawn on screen, while whitespace between block-level elements such as paragraphs, list items and table cells is not. An XML-style formatter that puts every tag on its own line therefore changes the page: Hello<b>world</b>! would gain spaces around world. This formatter follows the browser's rules instead:

• Block elements — div, p, ul, li, table, h1–h6, section and the rest — start on their own lines and are indented by nesting depth.
• Inline content — text, a, b, em, code, span, img — stays on one line. It is broken only where your source already had a line break, which a browser shows as a single space either way.
• pre, textarea, script and style are copied character for character, because their whitespace is either displayed or part of the code. A script's end tag is lined up with its start tag; nothing inside is re-indented.
• Attribute values, character references and tag case are kept as written. Only the spacing between attributes and around = is normalised.
• Optional end tags are not added. HTML lets you leave out </li>, </p>, </td> and a few others; if your source omits them, so does the output.

Minify applies the same rules in reverse: runs of whitespace inside text collapse to one space, whitespace between block elements disappears, and comments go — except conditional comments such as <!--[if mso]>, which classic Outlook for Windows still reads in HTML email.

How the Tag Checker Reads Your HTML

The checker builds the same element tree a browser would and reports only what is genuinely broken, not what HTML allows. Void elements like <br>, <img>, <input> and <meta> never take an end tag, and <li> or <td> closing implicitly when the next one starts is valid HTML, so neither is flagged.

A Worked Example

<div class="note"><h2>Results</h2><p>Mean score: <strong>4.2</strong>
(n = 48)</p><ul><li>Pilot<li>Main study</ul></span></div>

<div class="note">
  <h2>Results</h2>
  <p>
    Mean score: <strong>4.2</strong>
    (n = 48)
  </p>
  <ul>
    <li>Pilot
    <li>Main study
  </ul>
  </span>
</div>

<div class="note"><h2>Results</h2><p>Mean score: <strong>4.2</strong> (n = 48)</p><ul><li>Pilot<li>Main study</ul></span></div>

The paragraph keeps its two lines because the source broke the line before (n = 48), and Mean score: <strong>4.2</strong> stays together because there was no whitespace inside it to break at. The list items have no end tags in the source and get none in the output. The stray </span> is reported and left exactly where it was. Minifying the 166-character formatted version gives one line of 127 characters, a 23.5% saving, with the line break before (n = 48) turned back into the single space a browser would have drawn.

Frequently Asked Questions

Will formatting my HTML change how the page looks?

It should not. The formatter only adds or removes whitespace where browsers ignore it — between block elements and inside layout-only containers like <select> and <svg> — and otherwise only turns an existing space into a line break or back. The exception is CSS: if your stylesheet sets white-space: pre on an ordinary element, its spacing will be reflowed.

How is this different from an XML formatter?

XML has no void elements, optional end tags or inline whitespace rules, so an XML formatter rejects <br> and <li> without an end tag and puts every element on its own line. This formatter parses HTML the way a browser does and keeps inline content on one line. For RSS, SVG files or other XML, use the XML Formatter & Validator.

Why are my end tags for <li> and <td> missing?

Because they were missing in the source, and HTML allows that: a <li> ends where the next <li> or the end of the list begins. The formatter reproduces your markup rather than rewriting it, so it adds no end tags you did not write.

What does a stray end tag mean?

An end tag with no matching open element, usually left behind when a block was deleted or pasted. Browsers ignore most of them, but </br> becomes a line break and </p> an empty paragraph, so the formatter keeps each one in place and lists it with its line number for you to remove.

How much smaller does minifying make HTML?

It depends entirely on how much indentation and how many comments the source has — the example above loses 23.5% of its characters. The gzip or Brotli compression most servers already apply shrinks repeated whitespace well, so the saving on the wire is smaller. Minifying here never rewrites attribute values or removes end tags, which keeps it safe on any page.

Is my HTML uploaded anywhere?

No. Parsing, formatting and minifying all happen on this page in your browser. Nothing you paste is sent to a server, and links or images in your HTML are not loaded.