How to use this tool

1. Fill in the inputs.
2. Read the result.
3. Copy or download as needed.

About the HTML Formatter

The HTML Formatter reformats a block of HTML markup with proper, consistent indentation to make it easier to read and debug, or alternatively minifies it by stripping unnecessary whitespace to reduce file size. Paste in any HTML, choose Format or Minify, and get an instantly reorganized result.

Properly indented HTML makes it far easier to understand a document's structure at a glance, spot mismatched or improperly nested tags, and communicate markup clearly with other developers, while minified HTML is better suited for production use where every byte of page load time matters.

The formatter first inserts a line break between every pair of adjacent tags, then processes the resulting lines one at a time, tracking a running indentation level. When it encounters a closing tag, it reduces the indentation level before printing that line; when it encounters an opening tag that is not a self-closing or void element (like `<br>`, `<img>`, or `<input>`, which never have a matching closing tag), it increases the indentation level for the lines that follow. This produces a nested, readable structure similar to how a developer would typically hand-format HTML.

Minification works in the opposite direction: it collapses any whitespace between tags down to nothing, and reduces any remaining runs of multiple spaces down to a single space, producing the most compact valid version of the same markup with no visual change to how the page renders.

Common use cases

• Reformatting minified or poorly indented HTML for easier reading and debugging.
• Cleaning up HTML copied from a content management system or word processor before use in code.
• Minifying HTML before deploying it to production to reduce page size and load time.
• Reviewing a colleague's HTML structure more easily by viewing it in a clean, indented format.
• Quickly checking how deeply nested a section of markup is by observing the formatted indentation.

Tips and best practices

• This formatter uses a simple, general-purpose indentation approach rather than a full HTML parser, so extremely unusual or malformed markup may not format perfectly in every edge case.
• Always test minified HTML in an actual browser after minifying, particularly if your original markup relied on specific whitespace for visual spacing (which is rare, but does happen in some legacy code).
• Use formatting during development and debugging, and minification only for the final production version of a page, to get the best of both readability and performance.
• Void elements like `<br>`, `<img>`, `<input>`, and `<hr>` are correctly recognized as not needing a closing tag, so they will not incorrectly increase the indentation level.

Frequently asked questions