HTML Beautifier / Formatter — Pretty-Print HTML Online

Format messy or minified HTML with clean indentation and line breaks. Handles void elements (<br />), preserves preformatted <pre> / <textarea> / <script> / <style>, and normalizes self-closing tags. 100% local.

Last updated: July 20, 2026

Indent:

HTML input (minified or messy)

212 chars · 1 lines

Beautified

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>
      Demo
    </title>
  </head>
  <body>
    <header>
      <h1>
        Welcome
      </h1>
      <p>
        This is a
        <em>
          demo
        </em>
        paragraph.
      </p>
    </header>
    <ul>
      <li>
        One
      </li>
      <li>
        Two
      </li>
    </ul>
  </body>
</html>

Need to go the other way? HTML Minifier →

Paste any HTML — messy, minified, or a mix — to get properly indented, line-broken output. Void elements (<br />) are normalized, and <pre> / <textarea> / <script> / <style> contents are preserved verbatim so layout and behavior stay intact.

What is HTML Beautify?

HTML beautification (pretty-printing) is the inverse of minification: take a compact HTML blob and lay it out with consistent indentation, one tag per line, and clear structure. Useful for debugging generated markup, reviewing framework output, or preparing HTML for a code review. This tool tokenizes without a full DOM parser (staying framework-agnostic and SSR-safe), then re-emits every tag on its own line at the correct indent depth. Void elements like <br> and <img> are normalized to XHTML-style <br /> for JSX / XHTML compatibility, and any element whose whitespace is semantically meaningful — <pre>, <textarea>, <script>, <style> — is left untouched.

How to beautify / format HTML online

1Paste minified or messy HTML into the input pane.
2Choose an indent size (2 spaces default, 4 for many teams, 0 for tabs).
3The output pane updates instantly with clean, readable HTML.
4Copy back into your editor for review, or diff against another version.

Use Cases

Read minified production HTML

When 'View Source' shows a wall of tags on one line, paste it here to inspect the structure.

Format framework-generated output

React / Vue / Svelte SSR sometimes emits weirdly-broken lines. Reformat before diffing or committing.

Prep HTML for a blog post

When embedding HTML in Markdown or docs, well-formatted code is easier to read and review than a compressed blob.

Debug template output

When your template produces unexpected DOM structure, beautifying the raw HTML makes the tree obvious.

Key Concepts

Block vs inline elements: Block elements (div, p, section, h1, …) each get their own line. Inline elements (span, a, em, strong, …) can share a line with their surrounding text.
Preformatted preservation: Any content inside <pre>, <textarea>, <script>, or <style> is copied verbatim to preserve whitespace-dependent semantics.

Tips & Best Practices

▸This tool doesn't repair broken HTML — mismatched tags stay mismatched. For repair, paste into a browser and view Elements panel, which uses the built-in HTML5 parser.
▸For very long lines of text content inside <p> or <div>, the beautifier keeps them on one line — long-line wrap is a separate concern (editor / IDE responsibility).
▸Indent = 0 uses tabs — good for teams whose style guide is tab-based.
▸The beautifier preserves attribute order and casing (mostly) — it's not opinionated about your source style, just about layout.

Frequently Asked Questions

How does the beautifier decide where to add line breaks?

Every opening / closing block tag goes on its own line; inline text content is kept with its tag when short. <pre>, <textarea>, <script>, and <style> contents are preserved verbatim to avoid breaking layout or functionality.

Does it fix malformed HTML?

No — the tool tokenizes without doing full DOM correction. Mismatched or unclosed tags come through as-is. For serious HTML repair use a browser DOMParser or a linter like HTMLHint.

Can I use tabs instead of spaces?

Yes — set the indent size to 0 to switch to tab-based indentation.

How does it handle void elements?

<br>, <img>, <hr>, etc. are normalized to XHTML-style self-closing (<br />), which is safe both for HTML5 (the slash is ignored) and for JSX / XHTML consumers.

Is my HTML uploaded anywhere?

No. Everything runs locally.

Related Tools

cURL Converter

Convert cURL commands to Python (requests), JavaScript (fetch), Node.js, Go (net/http), PHP, or Java (HttpClient). Parses -H, -d, --data-urlencode, -F, -u, --json and more. 100% local.

URL Parser

Parse any URL into scheme, host, port, path, and query parameters — or build a URL from scratch with a form. Great for debugging redirect chains, tracking pixels, and OAuth flows. 100% local.

CIDR Calculator

Calculate IPv4 subnets from CIDR notation online. Get network address, broadcast, netmask, wildcard, usable host range, IP class, and binary representation. 100% local — nothing leaves your browser.

URL Encode/Decode

Percent-encode and decode URLs online. Handles query strings, path segments, and special characters correctly.

Color Converter

Convert colors between HEX, RGB, HSL, and HSV instantly. Includes a live color preview and copy-ready CSS strings.

HTML Minifier

Minify HTML by removing comments, collapsing whitespace, and stripping optional attribute quotes and void-element slashes. Reports byte savings. Preserves IE conditional comments and preformatted <pre> / <textarea> / <script> / <style> content. 100% local.