HTML Formatter
Beautify or minify HTML: block elements on new lines, inline elements untouched; script/pre content preserved verbatim so rendering never changes.
>_ USAGE GUIDE
Beautify and minify in both directions: beautifying follows the rule "block elements on their own lines, inline elements kept together" — <div> tags each get a line, while <a><span> sequences stay connected, because breaking them would inject extra whitespace and change rendering. Minifying removes whitespace to cut size while preserving script, pre, and textarea contents verbatim — the rendered result never changes.
- Paste the HTML: a scraped production page, a messy template, or a static file
- Beautify or minify: expand for editing, compress for shipping
- Copy the output: formatted for reading, minified for deployment
Typical scenarios: making sense of the minified HTML behind a live page, tidying a template before modifying it, and shrinking static pages before release. The formatter also doubles as a teaching aid for markup hygiene: paste a page, study how block and inline elements are laid out, and the indent structure makes the document tree obvious at a glance. Processing is local — code never leaves your machine.
>_ FAQ
Q1 · Why can't HTML minification just delete every space?
Because whitespace is semantic in HTML: a line break between inline elements renders as a visible space, so <a>A</a> followed by a newline and <a>B</a> displays differently from the two tags glued together. Naive whitespace removal produces words stuck together on the page. This tool's rule set — free wrapping for blocks, preserved spacing at inline joins — keeps rendering identical before and after.
Q2 · Are script and pre contents reformatted?
No. <pre> whitespace *is* the displayed content — removing any of it destroys the layout — and <script> bodies are JavaScript that an HTML-level tool must not touch. Both categories are preserved byte for byte through beautify and minify alike.
Q3 · Why do some tags look oddly placed after formatting?
HTML tolerates plenty of "non-standard but renderable" markup: unclosed tags, auto-inserted tbody, restrictions on nested p elements. The parser rebuilds the document per the standard, so the formatted output reflects the real parsed structure — revealing the gap between what you wrote and what the browser understood. The odd spots are usually where latent bugs were hiding.
Q4 · How much smaller does HTML minification get?
Depends on the source: neatly indented templates shrink 20–40%; already-compact files gain little. Remember that HTML's bulk usually lives in repeated structures and inline scripts, which whitespace removal does not address — pair minification with gzip for the complete answer, since gzip compresses repetitive text far more aggressively.
Q5 · Can it format framework templates (Vue, JSX, Thymeleaf)?
Not recommended. Template syntax — {{ }}, {% %}, v-if — belongs to the host framework, and a generic HTML parser can misjudge the structure, especially where template control flow crosses tag boundaries. This tool targets plain HTML and static pages; framework templates are safer in the matching formatter plugins (Prettier plus its plugins).