Does formatting HTML change how it renders in the browser?

No. Browsers ignore whitespace between block elements, so adding indentation and line breaks doesn't change the visual output. The exception is whitespace inside pre, code, and textarea elements — but a good formatter preserves that as-is. Inline elements like span and a also don't get their surrounding whitespace changed.

Can I use this to format JSX?

Not reliably. JSX looks like HTML but isn't — it uses className instead of class, self-closes all elements, and supports JavaScript expressions inside {}. An HTML parser will mangle JSX. Use your code editor's built-in formatter (Prettier works great for JSX) instead.

Why does my formatted HTML look different from Prettier's output?

Prettier uses a sophisticated algorithm that considers line length, breaks attributes across lines, and reformats inline content. This tool uses a simpler approach — it's meant for quick readability when you paste in minified HTML, not to enforce a consistent code style. For enforced style in a codebase, Prettier is the right tool.

What indentation size should I use?

2 spaces is the most common choice for HTML and is what most style guides recommend. 4 spaces is common in Python-adjacent projects. Tabs are a reasonable choice if your team already uses tabs for consistency. For quick debugging, it doesn't really matter — pick whichever makes the structure easiest to scan.

Why are some tags not getting indented properly?

The formatter treats inline elements (span, a, strong, em, code, and similar) as non-indenting — they stay on the same line as their parent. This is intentional: indenting inline elements would change how whitespace-sensitive content renders. Void elements (br, hr, img, input) are also handled separately since they have no closing tag.

HTML-Formatierer

Verschönern und formatieren Sie HTML mit korrekter Einrückung. Unterstützt 2-Leerzeichen-, 4-Leerzeichen- oder Tab-Einrückung sowie Attributumbrüche.

Einrückung:

Wrap attributes

HTML-Eingabe

Formatiertes HTML

Anleitung

Verschönern und formatieren Sie HTML mit korrekter Einrückung. Unterstützt 2-Leerzeichen-, 4-Leerzeichen- oder Tab-Einrückung sowie Attributumbrüche.

1Paste your minified or unformatted HTML into the input area on the left.
2Choose your preferred indent size — 2 spaces, 4 spaces, or tabs.
3Toggle 'Wrap attributes' if you want each HTML attribute on its own line (useful for long tags).
4Click 'Format' to generate the prettified HTML output on the right.
5Click 'Copy' to copy the formatted HTML to your clipboard.

Funktionen

Smart indentation — correctly handles void elements, inline elements, and self-closing tags
Wrap attributes mode — puts each attribute on its own line for long or complex tags
Three indent styles — 2 spaces, 4 spaces, or tabs to match your project's coding style
Fragment support — formats HTML snippets without wrapping them in an html/body document
100% client-side — nothing is uploaded; paste, format, and copy without leaving your browser

Häufig gestellte Fragen

Mehr erfahren

Online HTML Formatter — Making Sense of Minified HTML