How this HTML formatter lays out code
HTML is not like JSON or XML: whitespace between some elements changes what the browser shows. A good formatter has to know which elements are block-level (safe to put on their own line) and which are inline (a line break becomes a visible space). This one follows the rules below, so formatting does not alter the rendered page.
| Element type | Examples | How it is formatted |
|---|---|---|
| Block and structural | html body div section p ul li table tr td form h1–h6 | Own line, children indented one level. Short text-only blocks stay on one line: <li>Home</li> |
| Inline (phrasing) | a span strong em b i code small label abbr | Kept on the same line as surrounding text; runs of whitespace collapse to one space |
| Void | br img input meta link hr source wbr | Never get a closing tag or children; <br> inside text stays inline |
| Raw text | script style | Content re-indented as a block, code itself untouched; JSON-LD and templates stay valid |
| Preformatted | pre textarea | Output byte-for-byte, because every space and newline is visible |
| Comments, doctype | <!-- --> <!DOCTYPE html> | Own line, unchanged |
Preview the formatted HTML
Press Preview to render the output in a sandboxed frame below the tool — a quick way to confirm that beautifying or minifying did not change what the page looks like. The sandbox blocks scripts, forms, pop-ups and navigation, so pasting untrusted markup is safe. For a full-screen live editor, use the HTML preview tool.
Before and after
Input, as produced by many CMS exports and minifiers:
<div class="card"><h2>Plans</h2><p>Starts at <strong>₹499</strong>/month. <a href="/pricing">See pricing</a></p><ul><li>Free trial</li><li>Cancel anytime</li></ul><img src="plan.png" alt="Plan"></div>Formatted with a two-space indent:
<div class="card">
<h2>Plans</h2>
<p>Starts at <strong>₹499</strong>/month. <a href="/pricing">See pricing</a></p>
<ul>
<li>Free trial</li>
<li>Cancel anytime</li>
</ul>
<img src="plan.png" alt="Plan">
</div>Note that the paragraph is not split around <strong> and <a>: doing so would insert visible spaces that were not in the original.
HTML minifier and compressor: shrink markup for production
Minifying removes indentation, line breaks between block elements and (optionally) comments. Whitespace between two inline elements is reduced to a single space rather than removed, so <b>Hello</b> <i>world</i> still renders with its space. Conditional comments (<!--[if IE]>) used by email templates are kept by default. Typical savings are 10–25% before compression; with Brotli or gzip on top the difference shrinks, but it still helps large server-rendered pages and inline HTML in JavaScript bundles.
Format HTML from the command line or your editor
Prettier (Node.js)
npx prettier --parser html --print-width 100 --write "src/**/*.html"js-beautify
npx js-beautify --type html --indent-size 2 --wrap-line-length 0 index.html > index.pretty.htmlhtml-minifier-terser (build step)
npx html-minifier-terser --collapse-whitespace --remove-comments \
--minify-css true --minify-js true -o dist/index.html src/index.htmlPython (BeautifulSoup)
from bs4 import BeautifulSoup
print(BeautifulSoup(open("page.html"), "html.parser").prettify())
# note: prettify() puts inline tags on their own lines, which can add visible spacesVS Code
Open the file and press Shift+Alt+F (Windows/Linux) or Shift+Option+F (macOS). Set "html.format.wrapLineLength": 0 to stop it wrapping long lines.
Common questions
Will formatting HTML change how my page looks?
Normally no. Line breaks and indentation are only added between block-level elements, where browsers ignore whitespace. Inline elements stay on the same line as their text, and pre, textarea, script and style contents are not reflowed.
How is minifying HTML different from gzip?
Minifying removes characters from the source; gzip or Brotli compresses whatever is sent. They stack: minified HTML still compresses, and the combined saving is usually a few percent more than compression alone.
Why does the formatter not add a closing tag to br or img?
They are void elements — along with input meta link hr source area base col embed track wbr — and can never have content or a closing tag. </br> is an error.
Does minifying touch script, style or pre content?
Only the leading and trailing blank lines of script and style are trimmed; the code inside is not rewritten or mangled. pre and textarea are copied byte-for-byte. For JavaScript and CSS minification use a dedicated tool such as the CSS minifier.
Does the formatter fix broken HTML?
It is tolerant: it closes elements left open and ignores stray closing tags, and it lists what it repaired. It does not rewrite invalid nesting the way a browser does, so treat the warnings as a checklist.
Is my HTML uploaded anywhere?
No. Formatting and minifying run in JavaScript on this page. The markup is never uploaded or stored, and the optional preview uses a sandboxed frame with scripts disabled.
Can I format only part of a page?
Yes. Fragments without html, head or body are formatted as-is, so you can paste a component, an email block or a CMS snippet.