HTML Formatter & Minifier

Formatting HTML that stays readable

Pretty-printing HTML is harder than CSS or JSON because whitespace between elements can be significant and because mixing block and inline content is normal. This formatter builds a lenient tree from the markup and re-renders it: block elements that contain other block elements are broken onto their own lines and indented by depth, while an element whose children are all inline or text — a paragraph with some emphasis in it, a list item, a heading — is kept on one line so you are not left with a column of single words.

Some content must never be touched. The text inside <pre>, <textarea>, <script> and <style> is treated as raw: its whitespace is preserved exactly, because reindenting it would change what the browser renders or what the script does. Void elements (<br>, <img>, <input>, <meta> and the rest) are emitted without a bogus closing tag, and a leading <!DOCTYPE> is kept on its own line.

It is a formatter, not a validator or a fixer. It handles the common mistake of an omitted closing tag on a void element and degrades gracefully on other errors — an unmatched </div> is ignored rather than throwing — but it will not restructure invalid nesting or tell you what is wrong. Run genuinely broken markup through a validator first.

Minify mode removes whitespace between tags, trims text runs, and drops plain comments while keeping Internet Explorer conditional comments. Be aware that a space between two inline elements can be visually meaningful (the gap between two links, for instance), so check inline layouts after minifying. The tool does not touch attribute values, remove optional tags, or shorten anything else.

Everything runs in your browser — paste private templates freely; nothing is uploaded.

beautify:  indent by nesting depth; keep a block on one line when all its children are inline/text;
           <pre>/<textarea>/<script>/<style> content verbatim
minify:    remove whitespace between tags, trim text, drop plain comments (keep <!--[if …]>)

Worked example

Before:
<ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul><p>Hello <strong>world</strong></p>

After (beautify, 2 spaces):
<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
</ul>
<p>Hello <strong>world</strong></p>

Block elements such as ul and li get their own lines and indentation; inline elements such as a and strong stay inside the text they belong to, so the rendered page looks the same.

When to use it

• Reading minified or generated markup — CMS output, email templates, a page saved from the browser.
• Reviewing a diff: format both versions the same way first, so the comparison shows real changes.
• Shrinking a template that will be inlined into JavaScript or sent in an email, with minify.
• Not as a validator: it will not tell you about missing alt text or invalid nesting. Use the W3C Markup Validation Service for that.

Whitespace that matters

Browsers collapse runs of spaces and line breaks into a single space, but they do not ignore that space entirely between inline elements. Two inline-block buttons written on separate lines have a small gap between them; minified onto one line without whitespace, the gap disappears. The formatter keeps a single space where text needs one, but if a layout relies on those gaps, check it after minifying — or better, control spacing with CSS gap or margin instead of whitespace.