HTML Formatter

Beautify or minify HTML code instantly in your browser. Paste markup, load a file, pick 2-space, 4-space, or tab indentation, and format or compress in one click. No upload, no signup.

html format beautify
Free Client-Side Private
🔒 This tool runs entirely in your browser — your files are never uploaded to any server.

Beautify or minify HTML code instantly, entirely in your browser. Paste your markup, load a .html file, or drag and drop it onto the input area. Choose Beautify to add consistent indentation based on the tag hierarchy, or Minify to strip comments and collapse whitespace into a compact single-line output. Copy the result or download it as a file — no server, no upload, no data leaves your device.

How to use

  1. Paste HTML into the input area, or click Load file to open a .html or .htm file from disk. You can also drag and drop a file directly onto the textarea.
  2. Select the Output mode: Beautify (readable, indented) or Minify (compressed, single line).
  3. When Beautify is selected, choose an Indent with style — 2 spaces, 4 spaces, or a tab character.
  4. Click Beautify HTML or Minify HTML (the label updates automatically).
  5. Copy the output to the clipboard or click Download .html (minified files are saved as .min.html).

Output modes

Mode What it does
Beautify Adds consistent indentation based on tag nesting depth. Trims extra whitespace. Puts each element on its own line.
Minify Removes HTML comments. Collapses whitespace between tags. Compresses text nodes. Preserves <script>, <style>, and <pre> content verbatim.

Indent options (Beautify mode)

Option Character(s)
2 spaces ·· (two space characters)
4 spaces ···· (four space characters)
Tab → (one tab character)

What the formatter handles

  • DOCTYPE declarations — kept as-is on their own line
  • HTML comments — preserved in Beautify mode, stripped in Minify mode
  • CDATA sections — kept verbatim
  • Void elements — <br>, <img>, <input>, <meta>, <link>, etc. never increase indent depth
  • Raw-block elements — <script>, <style>, and <pre> content is never re-parsed as HTML tags
  • Self-closing tags — treated at the current indent level without affecting depth

When to use each mode

Use Beautify when you receive minified or poorly formatted HTML and need to read, audit, or edit it. Use Minify to reduce file size before deployment or to inline HTML snippets in JSON, config files, or template strings.

FAQ

Does this tool modify my HTML structure?

No. The formatter only changes whitespace and indentation. Tag names, attributes, and content are never altered. Minify mode additionally removes HTML comments, which do not affect rendering.

Are <script> and <style> blocks formatted?

In Beautify mode, each non-blank line of <script> and <style> content is indented to match the surrounding depth, but no JS or CSS reformatting is applied. In Minify mode, their content is collapsed to a single line but otherwise preserved.

What happens to <pre> blocks?

<pre> content is always preserved exactly as typed. Minify mode does not collapse whitespace inside <pre> because that whitespace is meaningful for rendering.

Does the minifier break my page?

For standard HTML it is safe. The minifier does not alter attributes, URLs, event handlers, or inline styles. It only removes comments and collapses inter-element whitespace. Always verify the output in a browser before deployment.

How large a file can I process?

There is no hard limit — the tool runs entirely in the browser and is limited only by available memory. Files up to several megabytes typically process in under a second.

Is my HTML sent to a server?

No. All processing happens in JavaScript directly in your browser tab. Nothing is transmitted to any server.

Report an issue