# HTML Formatter

> Beautify and format minified or messy HTML code

**Category:** Dev
**Keywords:** html, formatter, beautifier, pretty print, minified, code, indent, web
**URL:** https://complete.tools/html-formatter

## How it formats HTML

The formatter parses your HTML token by token and applies consistent indentation rules:

- **Opening tags** increase the indent level for everything inside them
- **Closing tags** step back one indent level before rendering
- **Self-closing tags** (br, hr, img, input, link, meta, area, base, col, embed, param, source, track, wbr) do not increase the indent level
- **Script and style blocks** are preserved verbatim so your JavaScript and CSS logic is not altered
- **HTML comments** are kept intact and indented to match their position in the document
- **DOCTYPE declarations** appear at the top with no leading indent
- **Excessive whitespace** between tags is collapsed so the output stays clean

The output preserves the original structure and all attribute values. Only whitespace and indentation are changed.

## Common use cases

- **Debugging minified HTML**: Production builds often strip all whitespace to reduce file size. Formatting makes it human-readable again so you can trace layout problems or check the DOM structure.
- **Code review**: Properly indented HTML is far easier to review and understand than a single long line.
- **Template editing**: CMS exports and email template tools often produce disorganized markup. Format it before making edits.
- **Learning HTML**: Seeing well-structured, indented HTML helps beginners understand how tags nest and relate to each other.
- **Copy-pasting from DevTools**: HTML copied from the browser inspector often arrives with inconsistent spacing. Clean it up before adding it to your project.
- **Comparing markup**: Formatted HTML is much easier to diff against another version.

## How to use

1. Paste your HTML code into the input text area
2. Choose an indent size — 2 spaces is common for web projects, 4 spaces is common in some style guides
3. Click the Format HTML button
4. Review the formatted output in the second panel
5. Click Copy to copy the result to your clipboard
6. Click Clear to start over with new HTML

## FAQs

**Q:** Will this change my HTML code in any way other than whitespace?


**A:** No. The formatter only adjusts indentation and removes redundant whitespace between tags. All tag names, attributes, attribute values, comments, and text content are left exactly as they are.


**Q:** Does it work with partial HTML snippets, not just full documents?


**A:** Yes. You can paste a single div with nested elements, a list, a table, or any fragment of HTML and it will be formatted correctly. You do not need a complete document with a DOCTYPE and html tags.


**Q:** What happens to inline JavaScript inside script tags?


**A:** Script block contents are preserved as-is. The formatter does not parse or reformat JavaScript. The opening and closing script tags are indented normally, and everything between them is indented one level and then left alone.


**Q:** What about CSS inside style tags?


**A:** Same as script blocks — the style tag is indented correctly, and the CSS inside is indented one level and left unchanged. The formatter is an HTML formatter, not a CSS formatter.


**Q:** Does this work with HTML5 custom elements?


**A:** Yes. Any tag the formatter does not recognize as self-closing is treated as a block element that can contain children. Custom elements like my-component or ion-button will be indented correctly.


**Q:** Is there a size limit on the HTML I can paste?


**A:** The tool runs entirely in your browser, so limits depend on your device. In practice it handles typical web pages without any issues.


**Q:** Can I edit the formatted output?


**A:** Yes. The output text area is editable. You can make tweaks directly in the output panel before copying.

---

*Generated from [complete.tools/html-formatter](https://complete.tools/html-formatter)*