HTML Formatter: Make Unreadable Markup Readable Again
You pasted HTML from a CMS and it's a single line of 4,000 characters. Or you're viewing source on a page and everything's minified. Or a colleague sent you a template with inconsistent indentation that makes your eyes bleed.
This tool formats HTML with proper indentation using Prettier — the same formatter used by most professional codebases. Or it goes the other direction: minifies clean HTML into a compact single-line payload for production.
Runs in your browser. Nothing leaves your machine.
What's actually happening
Formatting uses Prettier's HTML parser, which understands the full HTML spec — self-closing tags, void elements, embedded CSS and JavaScript, attributes, and whitespace rules. It produces consistently indented output with 2-space indentation.
Minification is a custom process that:
- Strips HTML comments (
<!-- ... -->) - Collapses consecutive whitespace into single spaces
- Preserves content inside
<pre>,<script>,<style>, and<textarea>tags — because whitespace matters in those elements - Removes unnecessary whitespace between tags
The result is valid HTML that's as small as possible without altering behavior.
Using it
Paste your HTML. Hit Format for pretty-printed output or Minify for compact output. Copy the result.
When you'd actually reach for this
- You're debugging a CMS template and the rendered HTML is one giant line
- You need to read HTML email templates — notoriously messy markup
- You're preparing HTML for a code review and want consistent formatting
- You're minifying an HTML email template to keep it under the size limit (some clients truncate large emails)
- You're cleaning up copy-pasted HTML from a WYSIWYG editor before embedding it
Why Prettier and not just indentation?
A naive formatter just adds line breaks and indentation based on tag nesting. Prettier goes further — it handles attribute formatting, understands which elements are inline vs block, respects content in <pre> blocks, and normalizes quote styles.
The difference shows on complex markup. A naive formatter might break an inline <span> onto multiple lines, adding visual whitespace that changes rendering. Prettier knows not to do that.
Edge cases
Inline elements — Prettier is smart about inline elements like <span>, <a>, <strong>. It won't add line breaks around them if doing so would introduce visible whitespace. <p>Hello <strong>world</strong></p> stays on one line.
Pre-formatted content — content inside <pre> and <code> blocks is preserved exactly as-is. Both the formatter and minifier know not to touch whitespace in these elements.
Embedded JavaScript and CSS — Prettier formats <script> and <style> blocks as JavaScript and CSS respectively, not as HTML text. You get properly formatted code inside those tags too.
Invalid HTML — Prettier is tolerant of invalid markup. It'll do its best to format it, but the output might not be what you expect. Garbage in, formatted garbage out. Fix your HTML first.
SVG — inline SVGs format correctly. The formatter handles SVG-specific elements and attributes.
Troubleshooting
Formatting changed my HTML behavior — Prettier sometimes adds or removes whitespace between inline elements, which can affect rendering. Check inline elements like <span> and <a> if your layout shifted. This is rare but worth knowing about.
The output has different quotes than my input — Prettier normalizes attribute quotes. By default, it uses double quotes. This doesn't affect behavior but might matter if you're comparing output with a specific style guide.
Minification broke my pre-formatted text — the minifier preserves <pre>, <script>, <style>, and <textarea> content. But if your pre-formatted text is in a different element (like a <div> with white-space: pre CSS), the minifier doesn't know about that and will collapse its whitespace.
The formatter choked on my template syntax — Jinja, EJS, Handlebars, and other template syntaxes aren't standard HTML. Prettier has plugins for some template languages, but this tool uses the standard HTML parser. Template tags like {{ variable }} or <% code %> might confuse the parser.
My HTML comments disappeared after minifying — that's intentional. Comments are stripped during minification. If you need conditional comments (like <!--[if IE]>), be aware they'll be removed too.
What to do with it
For debugging: formatted HTML is vastly easier to read and navigate. Find the element you're looking for, trace its nesting, spot unclosed tags.
For production: minified HTML saves bytes. On a large page, the difference can be meaningful — especially for HTML emails where every kilobyte counts against size limits.
For code review: consistent formatting means diffs show actual changes, not whitespace noise.