HTML Formatter - Online HTML Beautify & Minify

1. Beautify or minify

Beautify may rearrange whitespace text nodes — if your layout depends on spaces between inline elements, visually check the page after formatting. Minify mode reports character savings so you can see whether the pass is worth it.

1. Paste a fragment or a full page.
2. Choose Beautify (restore indentation) or Minify (strip excess whitespace).
3. Tune indent width, keep-comments, and keep-blank-lines, run the action, then copy or download.

2. Fits that come up often

Keep a “before” copy when the HTML is unfamiliar. Beautify is for humans; minify is for transfer size — switching modes on one page avoids shuttle pastes between tools.

• Third-party embeds: beautify first, then hunt tracking scripts.
• CMS exports: normalize indentation before a meaningful diff.
• Format, then send the fragment through html-to-jsx for a React skeleton.
• Email HTML: beautify while debugging; try minify before send if size budgets are tight.

3. Versus the dedicated HTML minifier

Template languages mixed with HTML confuse tag-based formatters. Always clarify whether you are editing a template or a rendered snapshot.

• Use this page as a convenience switch during investigation.
• Prefer the dedicated minifier page when comment and whitespace policy must match a production pipeline.
• Do not format sources that still contain Jinja, EJS, or Blade tags — format rendered output instead.

4. Whitespace, comments, and sensitive regions

Keep blank lines when you will keep editing by hand; turn them off for aggressive minify. License headers and build markers inside comments need the keep-comments option on. script, style, pre, and textarea regions are whitespace-sensitive — the formatter tries not to wreck them, but always do a visual regression on critical pages.

5. Pitfalls

When in doubt, format a minimal reproduce snippet first. If inline spacing shifts a button label, restore the critical spaces manually rather than disabling formatting for the whole document.

• SVG attribute wrapping usually survives; text nodes that rely on exact spaces may not.
• Browser View Source may already reflect a normalized DOM, not the original file on disk.
• In mixed Markdown+HTML docs, format only the HTML islands.

6. Suggested workflow

Receive a compressed blob → beautify here → understand structure → minify (or the dedicated minifier) for ship size. Optional chain: beautify → html-to-jsx, or extract tables into CSV tools. Keep secrets and unpublished copy out of shared screens even though the transform is local.

7. Boundary reminder

Split readability and transfer size into stages. CI and bundler minify rules remain the authority for production builds; this page is for triage and one-off cleanups when you do not want to spin up the whole toolchain.

8. Email, embeds, and diff-friendly habits

Marketing embeds often arrive as a single line with tracking pixels and three layered containers. Beautify, then delete what you do not need before the fragment enters your CMS. Email HTML that uses spacer GIFs and nested tables can look broken after aggressive minify if comments marked conditional Outlook blocks were stripped — keep comments on when dealing with mail templates. For accessibility reviews, beautify first so heading order and alt attributes are readable in source. Minify only after the accessibility pass, or keep a beautified source of truth in git and minify in CI. If a partner sends HTML with inline event handlers, beautify makes the handlers obvious during security review. Agree on indent width in editorconfig and match this tool’s indent control. When reviewing vendor patches, beautify both sides with identical options before diffing; otherwise review noise hides script injections.

• Keep comments when Outlook conditionals are present.
• Beautify before accessibility or security source review.
• Store beautified sources in git; minify in CI when possible.