Skip to content
TypeParser
All tools

HTML Formatter

Format and minify HTML cleanly.

beats htmlformatter.com edge: Void-tag aware + inline-tag aware indent
input.html
output
mode indent
paste HTML
Guide

About HTML Formatter

Pretty-print HTML with awareness of void tags (<code>&lt;br&gt;</code>, <code>&lt;img&gt;</code>) and inline elements (<code>&lt;a&gt;</code>, <code>&lt;span&gt;</code>) so the output reads cleanly. Or minify for production with collapse-whitespace and remove-comments toggles. Indent control (2, 4, or tab). Everything runs locally.

What an HTML formatter actually does

Walks the DOM, indents per nesting depth, preserves byte-significant content (<pre>, <textarea>, <script>, <style>), reflows everything else. Output is byte-different from input but renders identically.

The non-trivial part is HTML’s quirks: void elements that close themselves, inline elements that should not break onto their own line, attributes that should stay on one line vs spread to many. Our formatter follows the conventions most teams use:

  • Void tags — self-closed: <br />, <img src="..." />
  • Inline elements — kept inline: <p>Hello <a href="#">world</a>.</p>
  • Block elements — broken onto new lines with proper depth
  • Attributes — wrapped if a tag has 4+ attributes or exceeds 80 columns
  • Pre/script/style — content preserved verbatim

Common workflows

Reformat copy-pasted HTML. Email templates, scraped pages, third-party widgets — all paste in flattened. Format makes them legible.

Diff two HTML versions. Format both sides, paste into the Diff Checker. Whitespace stops being noise; structural changes pop.

Prepare HTML for a CMS. Some CMSes mangle on save unless source is already pretty-printed. Format first, paste second.

Minify for production. Toggle mode to Minify, collapse whitespace, drop comments, optionally remove unnecessary attribute quotes. Bytes drop 20-40% on typical templates.

Why local

HTML often holds the entire markup of an authenticated page — including form values, CSRF tokens, and rendered user content. Pasting into a remote formatter exposes all of it. Ours runs in your browser, no upload, no log. The browser ships its own HTML parser; we use it via DOMParser, format from the parsed tree.

Frequently asked questions

How is void-tag awareness different from generic formatting?
A naive formatter inserts a closing tag after <br> and breaks rendering. We recognize the HTML void list (br, img, input, meta, link, etc.) and self-close correctly.
Does it preserve <code>&lt;pre&gt;</code> formatting?
Yes. Whitespace inside pre, textarea, and script blocks is preserved byte-for-byte. Indenting them would break rendering.
Can it format an entire HTML page?
Yes. The DOCTYPE, html, head, and body roots are preserved. Comments stay on their own line at the depth they appeared.
What is the difference between formatting and minifying?
Formatting reflows whitespace for readability. Minifying strips whitespace, comments, optionally quotes around attributes, and reduces byte size — useful before deploy. Toggle the mode at the top of the tool.
Are <code>&lt;script&gt;</code> contents formatted?
No. Inline JavaScript is preserved. Use the JS Formatter on the script body separately if needed.
My HTML has Astro / Vue / Svelte syntax — does it still format?
Mostly. Component templates parse as HTML if their syntax stays well-formed. Custom directives (v-if, x-data) survive. Pure HTML output for CSS or JS blocks would need the dedicated tool.

Related tools

Last updated: 2025-01-15