What is HTML Prettify?

An HTML formatter is a tool that parses raw HTML and re-emits it with consistent two-space indentation, a single attribute per line for long tags, and predictable line breaks around block elements so the markup is readable, reviewable, and diff-friendly. The rendered page looks the same. The source becomes legible.

Frontend developers, email template authors, and CMS editors reach for an HTML formatter when minified markup from a build pipeline, a server-rendered response, or a CMS export needs to be inspected. A 5,000-character single-line <body> is unreviewable until block elements break across lines and attributes wrap predictably. Formatting also surfaces structural problems such as unclosed tags or mismatched nesting that browsers tolerate silently.

Why use an HTML formatter?

Make build output reviewable. Production HTML from Next.js, Astro, or Eleventy ships minified to save bytes. Prettifying that output is the only way to inspect what the framework actually shipped to the browser.
Surface unclosed tags. A real HTML parser refuses to balance markup that has missing closers. The error report points to the line where the document goes off the rails, which browsers would otherwise patch silently.
Standardize attribute placement. Long tags with five or six attributes are unreadable on one line. The formatter wraps attributes onto their own lines once a threshold is crossed, keeping short tags compact.
Clean up CMS exports. WordPress, Drupal, and Webflow exports often arrive with mixed indentation and double-spaced blocks. Reformatting flattens the document to one canonical style.
Shrink diffs in pull requests. Whitespace noise from a contributor’s editor disappears, so the diff shows only the markup or copy that actually changed.

How to use the HTML Prettify tool

Paste your HTML into the Input panel. Full documents (with <!doctype html> and <html>) and partial fragments both work.
Click Prettify. The markup is parsed and re-emitted with two-space indentation.
Read the rewritten HTML in the Output panel. Parse errors appear above the input area with a line reference.
Click Copy to copy the formatted HTML to your clipboard, then paste it back into your template, email, or pull request.

HTML formatting rules

The formatter follows the conventions baked into Prettier’s HTML parser and the WHATWG HTML spec .

Element	Convention	Why
Indentation	2 spaces, never tabs	Matches Prettier and most style guides
Element case	Lowercase tags and attributes	HTML5 convention
Self-closing void elements	No trailing slash (`<br>`, not `<br />`)	HTML5 (Prettier respects XHTML mode if requested)
Quote style	Double quotes around attribute values	Matches HTML5 reference parsers
Attribute wrapping	One per line when total length exceeds 80 chars	Matches Prettier default
Boolean attributes	Bare form (`disabled`, not `disabled="disabled"`)	HTML5 spec
Inline vs block	Block elements break to new line, inline stay flush	Preserves rendered layout
Whitespace inside `<pre>`, `<textarea>`, `<script>`, `<style>`	Preserved verbatim	Required by HTML5
Comments	`<!-- -->` preserved in place	Including conditional and metadata comments
Document ending	Trailing newline	POSIX text file convention

Examples

A minified server response with no line breaks:


<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Home</title></head><body><main><h1>Welcome</h1><p>Sign up <a href="/signup" class="btn btn-primary" data-analytics="hero-cta">here</a> to start.</p></main></body></html>

After prettifying, block elements break across lines and long attribute lists wrap:


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Home</title>
  </head>
  <body>
    <main>
      <h1>Welcome</h1>
      <p>
        Sign up
        <a
          href="/signup"
          class="btn btn-primary"
          data-analytics="hero-cta"
        >
          here
        </a>
        to start.
      </p>
    </main>
  </body>
</html>

HTML Prettify vs alternatives

The right HTML formatter depends on whether you need a single ad-hoc cleanup or repeatable formatting across an entire repository.

Tool	Best for	Offline	Cost	Limitations
In-browser HTML formatter	Single document pulled from a build or a chat	No	Free	No file watch, no save-on-format
`prettier --write '*/.html'`	Project-wide formatting in a repo	Yes	Free	Requires Node.js setup
`js-beautify` (CLI)	Long-standing alternative with HTML mode	Yes	Free	Slower defaults, more opinionated wrapping
VS Code “Format Document”	Live formatting while editing	Yes	Free	IDE-bound, not portable across teams

For one-off cleanup of a minified production response or a CMS export, an in-browser HTML formatter is the fastest path. For consistent style across a template directory, wire prettier into a pre-commit hook.

Common use cases

Frontend developers inspecting the actual HTML their framework shipped to the browser by formatting a captured server response.
Email developers cleaning up MJML or Foundation-for-Emails output before QA testing across Litmus or Email on Acid.
CMS implementers reformatting WordPress, Drupal, or Webflow exports before importing into a static site generator.
QA engineers capturing rendered HTML from a bug report and formatting it for inclusion in a Jira or Linear ticket.
Educators preparing HTML examples for tutorials that need to render consistently across MDN, freeCodeCamp, or course platforms.

Frequently asked questions

Will this HTML formatter change my page?

No. Every transformation is whitespace and structural. The rendered DOM is byte-identical after formatting for almost every input. The one exception is content inside <pre>, <textarea>, and other whitespace-sensitive elements, which is preserved verbatim precisely because rewriting it would change the rendered output.

Does it work on HTML fragments?

Yes. The parser handles partial documents, single tags, and snippets that lack <!doctype html> or <html> wrappers. This is useful for email templates, CMS field content, and React server-component output.

Why are some of my tags closed with `/>`?

Self-closing void elements such as <br>, <img>, and <input> accept either <br> or <br />. The formatter follows the HTML5 default, which is bare (no trailing slash). XHTML mode produces the slash form. Prettier’s default for HTML files is bare; for .svg or JSX it adds the slash.

Will it preserve my inline `<script>` and `<style>`?

The content inside <script> and <style> is preserved verbatim. The formatter does not reformat embedded JavaScript or CSS. For those, run the output through a dedicated JavaScript or CSS formatter.

How does it handle template syntax like Handlebars or Liquid?

Template delimiters such as {{ }}, {% %}, and <%= %> are preserved as opaque text. The formatter wraps and indents the surrounding HTML around them. For deep template-aware formatting, use the official plugin for your engine.

Can it format AMP HTML?

Yes. AMP-specific custom elements like <amp-img> and <amp-iframe> parse as regular HTML and are formatted with the same rules. Validation against the AMP spec is a separate step handled by the official AMP validator.

Does it minify or unminify?

This is the prettifier. It only expands minified HTML. For the reverse operation, use the dedicated HTML Minifier to collapse markup into a single line for production.

Will it strip comments?

No. HTML comments are preserved in place. Conditional comments used for legacy Internet Explorer support and metadata comments used by build tools both stay where you put them.

YAML Formatter - clean up YAML config and front matter blocks.
SQL Formatter & Beautifier - pretty-print SQL queries with standard keyword casing.
Markdown Formatter - normalize headings, lists, and code blocks across Markdown files.
HTML Minifier - collapse formatted HTML back into a single line for production deployment.