HTML & CSS Formatter

About this tool

Tidy up HTML or CSS that arrived on one long line, or shrink it before you paste it somewhere. This is a simple formatter written for this site: it indents tags and rules, keeps short elements on one line, and tells you about unclosed tags, stray closing tags and unbalanced braces. It does not rewrite or validate your code like a full build tool would.

How it works

• HTML is split into tags, text and comments. Block elements such as div, p and li start a new indented line; inline elements such as a, strong and span stay inside the text.
• The content of pre and textarea is kept exactly as it is, style blocks are formatted as CSS, and script blocks are only re-indented.
• CSS is split into selectors, declarations and comments. Quoted strings and url(...) values are never changed, so a semicolon inside them is safe.
• Minify removes comments and the spaces a browser does not need. For HTML, one space is kept between inline elements because removing it would change how the text looks.

Common questions

Is this as thorough as a code editor's formatter?

No. It is a small tokenizer that handles everyday HTML and CSS well. Unusual syntax, template tags or very broken markup can come out differently from a full formatter such as the one in your editor. Check the result before you replace your file.

Will minifying break my page?

It should not for normal pages, because spaces inside pre, textarea, quoted attribute values and strings are kept. Script content is only trimmed, not minified, so use a JavaScript minifier for scripts.

Is my code uploaded?

No. Formatting runs in your browser and nothing you paste is sent to our server.