# HTML beautifier

> Format HTML with Prettier: nested tags indented, long attributes wrapped, inline scripts and styles tidied. Free, and your markup stays in your browser.

Canonical: https://toolspace.tech/html-beautifier/
Last updated: 2026-10-25

Format HTML with Prettier: nested tags indented, long attribute lists wrapped, and inline `<script>` and `<style>` blocks tidied too. Minify mode collapses whitespace and strips comments for a smaller page.

This is an interactive tool that runs in the browser: [open the HTML beautifier](https://toolspace.tech/html-beautifier/) to use it. Nothing typed into it is uploaded.

## Worked example

A navigation list squeezed onto one line.

**html**

```
<nav><ul><li><a href="/">Home</a></li><li><a href="/blog">Blog</a></li></ul></nav>
```

**formatted**

```
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</nav>
```

## Common mistakes

### Closing tags out of order

`<b>``<i>`text`</b>``</i>` overlaps two elements. Browsers patch it up differently; close the inner tag first.

### Assuming whitespace never matters

`<a>`One`</a>``<a>`Two`</a>` and the same links on separate lines render differently: the line break becomes a space. Both modes here keep that difference.

### Expecting Minify to shrink scripts

Inline JavaScript and CSS are kept as written. Minify them with your build tool, or use the CSS beautifier’s Minify mode for styles.

### Escaping by hand

A literal < or & in text should be &lt; or &amp;. The HTML entity encoder converts a whole block at once.

## How it works

1. **Paste your markup:** A full page or a fragment. Open or drop an .html file; it’s read on your machine.
2. **Indent or compact it:** Format indents the tree and wraps at your line width. Minify collapses whitespace but leaves `<pre>`, `<textarea>`, `<script>` and `<style>` exactly as written.
3. **Check the structure:** A tag closed in the wrong place is reported with its line, so the output never silently restructures your page.

## Questions

### Why do some lines start with “>”?

Whitespace between inline elements such as `<a>`, `<span>` or `<label>` shows up on the page as a space. To add line breaks without adding visible spaces, Prettier moves the closing “>” of a tag onto the next line. It looks odd, but the page renders the same.

### What does Minify do?

It removes comments (except Internet Explorer conditional comments), collapses each run of whitespace to one space, drops whitespace where it never shows (in the `<head>`, between table rows and cells, between options) and tidies spaces inside tags. Attribute values and inline scripts and styles are not changed or minified.

### Is Minify safe for every page?

For normal HTML, yes: browsers already collapse whitespace the same way. The exception is an element other than `<pre>` or `<textarea>` that your CSS sets to white-space: pre; there, collapsed spaces would show. Use Format for such pages.

### Will it fix broken HTML?

It fills in optional end tags such as `</li>` and `</p>`, which browsers also allow. A closing tag in the wrong place, like `</div>` while a `<span>` is still open, is reported with its line instead of being guessed at.

## Related

- [Code beautifier](https://toolspace.tech/code-beautifier/)
- [CSS beautifier](https://toolspace.tech/css-beautifier/)
- [HTML entity encoder](https://toolspace.tech/html-entity-encoder/)
- [Markdown preview](https://toolspace.tech/markdown-preview/)