HTML formatter and beautifier

Beautify puts block elements like <div>, <section>, <ul> and <li> on their own lines and indents them according to how deeply they are nested. Code copied from a browser's View Source, an email template or a CMS export becomes readable in seconds.

Minify removes the whitespace and line breaks between tags, and optionally HTML comments, to make the file smaller. That reduces page weight slightly for static pages and HTML emails.

Everything runs in your browser. Templates with customer data, internal admin pages and unpublished content never leave your computer.

HTML is sensitive to whitespace in some places, so the formatter is careful:

• The content of <pre> and <textarea> is kept exactly as is, because whitespace is visible there.
• The content of <script> and <style> is not reformatted, so your JavaScript and CSS keep working. Use the JavaScript formatter or the CSS formatter for those.
• Inline elements such as <b>, <i>, <a>, <span> and <code> stay on the same line as the surrounding text. Breaking them onto new lines would add visible spaces between words in the rendered page.

The result is cleaner source code that renders the same as the original.

Knowing which elements are block-level and which are inline explains why the formatter puts some on new lines and leaves others in place.

Block elements (new line)	Inline elements (stay in the text)
div, section, article, header, footer, main, nav	a, span, b, strong, i, em
p, h1–h6, blockquote, pre	code, small, sub, sup, mark
ul, ol, li, table, tr, td	img, br, label, abbr
form, fieldset, figure	button, input, select

Whitespace between two inline elements is rendered as a space, so <b>Hello</b> <i>world</i> and <b>Hello</b><i>world</i> look different on the page. Between block elements, whitespace has no visible effect, which is why they can safely be moved onto separate lines.

Situation	Use
Reading or debugging someone else's markup	Beautify
Code review, committing templates to Git	Beautify
Editing an HTML email template	Beautify, then minify before sending
Static landing page in production	Minify
Pasting HTML into a CMS field with a size limit	Minify

For most websites, your server's gzip or Brotli compression already shrinks HTML a lot, so minifying saves only a little extra. It matters more for HTML emails, where some email clients clip messages over a certain size; Gmail, for example, clips messages larger than about 102 KB.

• Use 2-space indentation for HTML; deep nesting quickly pushes 4-space code off the screen.
• Always declare <!doctype html> and a lang attribute on <html>, which helps screen readers and search engines.
• Close your tags consistently, even where HTML allows you to leave them open, such as </li> and </p>.
• Keep comments that explain why, and drop commented-out old code before shipping.
• Validate important pages with the W3C Markup Validation Service, which checks against the HTML standard. This formatter tidies layout, but it does not fix invalid markup.

Need to show HTML code as text on a page, for example in a tutorial? Escape it first with the HTML encoder.