Why doesn't the beautifier add closing tags to or ?

Void elements such as , , , and have no closing tag in HTML by definition. Inventing a would produce invalid markup, so the formatter only indents them.

HTML Formatter — Beautify & Minify

What it does & when you need it

You've inherited a template that arrives as one endless line, or a server rendered a page with no whitespace and you need to see the structure before you can debug it. This tool does both halves of that job: Beautify re-indents raw markup into a readable tree so you can follow nesting at a glance, and Minify strips the comments and slack whitespace back out to shrink what you ship. It runs entirely in your browser, so a marketing page full of unreleased copy or an email template with customer tokens never touches a server.

Reach for it when you're diffing two versions of a component's output, cleaning up markup pasted from a CMS or a "view source", or trimming a static fragment before it goes over the wire. Because both directions are lossless in the ways that matter for rendering, you can round-trip freely: minify to measure payload, beautify to read, then minify again for production.

How to use

Paste your markup into the input.html buffer, press Sample to load a small nested document, or Upload an .html / .htm file.
Pick a mode. Beautify re-indents (choose a 2- or 4-space indent); Minify collapses the document to the smallest equivalent form. The output pane updates live as you type.
Read the status bars: the input shows its byte size, and the output shows the result size plus, in minify mode, the percentage saved. Press Copy result or Ctrl/Cmd + Enter to grab the output.

Things worth knowing

Inter-tag whitespace is not always safe to delete. The space between inline elements like <a>, <span>, or <img> is significant — the browser renders it as a real space, so removing it can push two words together or nudge your layout. This minifier collapses that whitespace aggressively because that's the behavior people usually want when squeezing a payload, but if you have a run of inline elements separated only by spaces, eyeball the result before shipping it.

Void elements have no closing tag, and the formatter leaves them that way. <br>, <img>, <input>, <meta>, <hr> and friends are self-closing by definition in HTML — there is no </br>. A formatter that "helpfully" invents a closing tag produces invalid markup, so beautifying only indents these; it never adds a partner tag.

Some elements are preserved verbatim. The content of <pre>, <textarea>, <script>, and <style> is whitespace-sensitive — a <pre> block is its formatting, and reflowing a script can change strings or break it. The minifier stashes those regions untouched and only compresses the markup around them. If you need to tidy the CSS or JavaScript inside those blocks, run it through the dedicated CSS Formatter or JS Formatter instead.

The two modes serve opposite goals. Beautify optimizes for a human reader — consistent indentation, one element per line. Minify optimizes for bytes on the wire: it drops non-conditional comments and redundant whitespace, which shrinks the file before gzip even gets to it (gzip handles repetition well, but there's no reason to compress bytes you can simply delete). If you're hand-encoding special characters rather than reshaping structure, the HTML Entities tool is the better fit, and for rendered .md content try the Markdown Preview.

Examples

Read a minified fragment

<!DOCTYPE html><html><head><title>Demo</title></head><body><!-- hero --><div class="wrap"><h1>Hi</h1><p>A <a href="/">link</a>.</p></div></body></html>

Beautify mode re-indents this one-liner into a readable tree so you can follow the nesting.

Shrink a template

<section class="card">
  <h2>Pricing</h2>
  <!-- TODO: wire up totals -->
  <ul>
    <li>Free</li>
    <li>Pro</li>
  </ul>
</section>

Minify mode drops the comment and whitespace, reporting how many bytes you saved.

Frequently asked questions

Does minifying HTML change how the page looks?

It shouldn't for block layouts, but whitespace between inline elements like <a> or <span> renders as a real space. Collapsing that inter-tag whitespace can push words together, so review runs of inline elements after minifying.

Are the contents of <script> and <style> reformatted?

No. The minifier preserves <pre>, <textarea>, <script>, and <style> verbatim because their whitespace is meaningful. To tidy the code inside them, use the dedicated JS Formatter or CSS Formatter.

Why doesn't the beautifier add closing tags to <br> or <img>?

Void elements such as <br>, <img>, <input>, and <meta> have no closing tag in HTML by definition. Inventing a </br> would produce invalid markup, so the formatter only indents them.

Is my HTML uploaded anywhere?

No. Beautifying and minifying run entirely in your browser with JavaScript, so the markup you paste or upload never leaves your machine and the tool keeps working offline.

Should I still minify if my server sends gzip?

Yes. Gzip compresses repetition well, but there is no reason to compress comments and whitespace you can simply delete first. Minifying shrinks the payload before gzip ever runs.

How to use HTML Formatter