Best Online ToolsFree and private. No sign-up.

HTML Beautifier & Minifier

Indent tangled HTML so you can read it, or squeeze it down for production.

Runs in your browser
HTML
Drop file to load it
EmptySaved locally
Result
Ready
Characters per line. 0 never wraps.
Conditional comments and server-side includes always stay.
More options (3)
Try an example:
"},{"label":"Commented template to minify","options":{"mode":"minify","comments":true},"input":"\n
\n

\n This week at Fennel & Fig\n

\n \n
    \n
  • Roast squash soup 7.50
    • \n
  • Lemon tart 4.00
    • \n
\n 
\n  Opening hours:\n    Tue to Sat   11:00 - 22:00\n
\n \n
\n"},{"label":"Tag with many attributes","options":{"mode":"beautify","wrap":80,"attrs":"lines"},"input":"
We send one letter a month.
"}]

How to use the HTML Beautifier & Minifier

  1. Paste your HTML into the left panel, or open an .html file from your computer.
  2. Pick Beautify to indent and wrap it, or Minify to strip comments and spare whitespace.
  3. Beautifying lets you choose the indent and wrap width. Minifying lets you decide whether comments go.
  4. Grab the output with Copy, or save it straight to an .html file.

Examples

About this tool

HTML that comes out of a build tool, a CMS export or a "view source" window is often squeezed onto a few enormous lines. The beautify mode re-indents every element to show the nesting, puts long attribute lists in order and wraps lines at the width you choose, so you can actually see where a <div> opens and closes. Embedded <script> and <style> blocks are formatted too, while <pre> and <textarea> content keeps its exact spacing because there it matters.

The minify mode goes the other way and is deliberately cautious. It removes comments and collapses the whitespace between tags, but it never touches attribute values, inline scripts or styles, and it keeps a single space between inline elements such as links and <span>s so words never run together. Conditional comments and server-side include directives are left in place because they do a job. The result is a smaller file that renders exactly like the original.

A practical tip: if you want the smallest possible page, minify the CSS and JavaScript separately with the matching tools before dropping them into the HTML, since this tool copies those blocks through unchanged.

This tool runs entirely in your browser. What you type or open is never sent to a server.

Frequently asked questions

Does my HTML get uploaded?

No. The formatter and the minifier are JavaScript that runs inside this page. The markup stays on your computer, which also means it works offline once the page has loaded.

Will minifying change how my page looks?

It should not. Only comments and whitespace that browsers ignore anyway are removed. Whitespace between inline tags is reduced to one space rather than deleted, unless you choose the "smallest file" setting, which can close up gaps between inline elements.

Why does the minifier keep some comments?

Comments that start with [if or contain [endif] are conditional comments for old browsers, and comments beginning with # are server-side include directives. Removing them could break the page, so they stay. Untick "Remove comments" to keep every comment.

Can it format Vue, Svelte or PHP templates?

Mostly yes. The beautifier understands common template syntax such as Handlebars, Django, ERB and PHP tags, and the minifier treats <?php ... ?> and <% ... %> blocks as untouchable. Very unusual templating may still confuse the indentation, so check the result.

Why is a block inside <pre> not re-indented?

Browsers render <pre> and <textarea> content exactly as written, so changing its spacing would change what visitors see. Both modes leave those elements alone on purpose.