HTML Formatter

About the HTML Formatter

Paste HTML — a minified page, template output or markup copied from DevTools — and get properly nested, indented code. The CSS inside <style> and the JavaScript inside <script> are formatted too, while <pre> and <textarea> content is left exactly as it is, because whitespace there is visible.

Minify makes HTML smaller without changing how it looks: runs of spaces and line breaks in text become a single space, whitespace inside tags is tidied, and comments are removed — except conditional comments, server-side include directives and the markers frameworks such as React and Vue need for hydration. Your markup is only ever handled as text: it is never rendered or run.

Common uses

• Reading the minified HTML of a page or an email template.
• Tidying markup generated by a CMS, a page builder or a templating engine before editing it by hand.
• Minifying static pages, embeddable widgets or HTML email without a build step.
• Finding unclosed comments, tags and <script> elements — they are reported with their line number.

What the minifier changes

• Runs of spaces, tabs and line breaks in text become one space. Browsers display them the same way, so the page looks unchanged. Next to Chinese, Japanese or Korean text a line break stays a line break (still one character), because browsers may hide it there instead of showing a space.
• One space is kept between elements by default, because inline and inline-block elements (links, buttons, menu items) would otherwise touch. Remove spaces between block tags also drops whitespace next to block elements such as <div>, <p> and <li>, like most minifiers do.
• Whitespace in <head> and around <html>, <head> and <body> is removed, because browsers never display it.
• Inside tags, extra spaces between attributes are removed; attribute values are kept exactly as written, quotes included.
• <pre>, <textarea>, <script>, <style>, the doctype, CDATA sections, <?php … ?> and <% … %> blocks are copied unchanged.
• As a final check the result is parsed again and must have the same tags, attributes, comments and text as the original, ignoring only whitespace.

Formatting options explained

• Wrap long lines at breaks long lines between words and between attributes. It never splits an attribute value.
• Attributes → One per line puts each attribute of a tag that has two or more on its own line — handy for long class lists and framework templates.
• Format CSS & JS formats <style> and <script> with the same engines as the CSS Formatter and the JavaScript Formatter. Turn it off to leave them exactly as they are.
• Template tags such as {{ }}, {% %}, <% %> and <?php ?> are kept intact, although the layout around them may not be perfect.

Limitations

• Formatting uses the open-source js-beautify HTML beautifier. It does not validate HTML or repair unclosed tags; problems such as an unclosed comment or <script> are reported as warnings.
• Formatting puts block elements such as <div> and <li> on their own lines, and never adds whitespace between inline elements such as <a> and <b>. Browsers ignore that new whitespace in normal layout, but between elements your CSS displays as inline-block (for example items of a horizontal menu) it can show up as a small gap.
• If your CSS sets white-space: pre, pre-wrap or pre-line on other elements, whitespace there matters, and both formatting and minifying change it. Keep such text in <pre> or <textarea> (never changed), or use Keep line breaks when minifying if only line breaks matter.
• Framework hydration markers are kept, but test a server-rendered page after minifying it — or turn off Remove comments.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.