PlayTools

HTML Formatter & Minifier

Beautify HTML by re-indenting to nesting depth (inline content stays on one line, pre/script/style preserved), or minify it by collapsing whitespace between tags.

Runs in your browser — nothing you enter is uploaded

Beautify re-indents by nesting depth. A block element whose children are all inline or text (like <p>Hello <b>world</b></p>) is kept on one line, and the content of <pre>, <textarea>, <script> and <style> is preserved. Minify removes whitespace between tags and drops plain comments (IE conditional comments are kept). This is a lenient formatter, not a validator — it will not fix broken markup. Runs in your browser.

Advertisement

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.

Key formulas (reference)

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 …]>)

These free tools pair well with this page — open them in a new tab to finish your workflow.

Advertisement

Frequently Asked Questions

How does the beautifier decide where to break lines?

It re-indents by nesting depth: each element that contains other block elements goes on its own line with its children indented one level deeper. An element whose children are all inline elements or text — like a paragraph with a bit of bold in it — is kept on a single line so the markup stays readable.

Is the content of <pre> and <script> preserved?

Yes. The raw text inside <pre>, <textarea>, <script> and <style> is treated as verbatim and its whitespace is not touched, because reformatting it would change what the page renders or runs.

Does it fix broken or unclosed tags?

No. This is a lenient formatter, not a validating parser. It handles missing closing tags on void elements (<br>, <img>) and degrades gracefully on other mistakes, but it will not restructure invalid markup — run it through a validator for that.

What does minify remove?

Whitespace between tags, leading/trailing whitespace in text runs, and plain HTML comments. It keeps a single space where one is significant inside text, and it keeps Internet Explorer conditional comments (<!--[if …]>).

Will minifying change how the page looks?

For most markup, no. The one thing to know is that whitespace between inline elements is sometimes visually significant (a space between two <a> tags), and aggressive between-tag whitespace removal can close that gap. Check inline layouts after minifying.

Can it format a full HTML document?

Yes. A leading <!DOCTYPE> is kept on its own line and the <html>, <head> and <body> structure is indented normally.

Is my HTML sent anywhere?

No. Formatting and minifying run entirely in your browser.