/

HTML Beautifier

Processed Client Side

Format and indent messy HTML markup instantly. Paste minified HTML and get clean, readable output.

Input · 1 lines · 518 chars
1 lines · 518 chars
Length: 518Lines: 1Size: 518 BytesCursor: 1:1
Output
Formatted
Length: 637Lines: 24Size: 637 BytesCursor: 1:1

Bookmark this tool now — skip the search next time you need it.

About HTML Beautifier

This tool runs entirely in your browser. Whatever you paste is processed on your own device and is never uploaded, logged, or sent to any server.

The HTML Beautifier turns minified or tangled markup back into an indented document you can actually read. It parses the HTML rather than nudging whitespace around, so it knows the difference between a block element that deserves its own line and an inline element like a span or a link, where a stray newline would add a visible space to the rendered page. Void tags never open an indent level, optional closing tags such as the ones after li and td are filled back in, and the contents of script, style, pre, and textarea are left exactly as written. Output updates as you type, in your browser, with nothing uploaded.

Key features

  • Parses the document rather than pattern-matching whitespace, so nesting, void elements, and unclosed tags are all understood
  • Runs of inline content stay on one line, so the spacing a browser renders around a, span, or strong never changes
  • Optional closing tags for li, p, td, tr, th, option, dt, and dd are filled in automatically
  • script and style contents are re-indented but never reflowed; pre and textarea are copied through character for character
  • Short elements collapse onto a single line and long ones break, the way a code formatter fills a paragraph
  • Two-space, four-space, or tab indentation
  • Attribute values are untouched, including quoted values that contain a > character
  • Syntax highlighting in both panes, with live line and character counts
  • Formats as you type, entirely in your browser, so markup is never uploaded

How to use it

  1. Paste minified or messy HTML into the left pane, replacing the sample.
  2. Pick two spaces, four spaces, or tabs from the indent selector.
  3. Read the formatted markup on the right, which re-renders on every keystroke.
  4. Scan the nesting: an element that indents somewhere unexpected usually marks a tag you forgot to close.
  5. Copy the output back into your template or editor.

Tips & common mistakes

  • Beautifying rewrites only the source whitespace, never the markup itself. Inline runs are deliberately left alone because whitespace between inline elements is rendered as a space.
  • Whitespace inside pre and textarea is significant, so those elements are passed through unchanged rather than indented into place.
  • JavaScript inside a script tag is re-indented as a block but not reformatted. Paste it into the JS Beautifier, format it there, and paste it back.
  • Quote your attribute values. An unquoted value containing a > ends the tag early for every parser, browsers included.
  • Formatting is not validation. Broken markup still formats, it just nests somewhere surprising, and that surprise in the output is usually the bug.
  • Minified HTML from a build step is meant to stay minified. Beautify a copy to read it rather than committing the expanded version.
  • Two spaces is the usual convention for HTML and matches the Prettier default, which keeps diffs small when the rest of the team formats on save.
  • To see the cleaned-up HTML running together with CSS and JS rather than viewed alone, use the Code Playground.
  • For JavaScript specifically, including a minify option, use the JS Beautifier / Minifier.
  • Porting the markup into a React component? Convert it with HTML to JSX Converter.

Related tools

Browse all 10 Code tools

Frequently asked questions

10

Paste your minified or messy HTML into the left pane and the indented version appears on the right immediately, updating as you type. Pick two spaces, four spaces, or tabs from the indent selector, then copy the result.

No. Only source whitespace is rewritten, and the places where whitespace is visible are deliberately left alone: runs of inline content stay on one line, and pre and textarea blocks are passed through exactly as written.

They stay on the same line as the text around them, with the original spacing intact. Whitespace between inline elements is rendered as a space by browsers, so putting each tag on its own line would change the page rather than just the source.

The block is re-indented to sit correctly in the document, but its contents are not reformatted, because they are not markup. Format JavaScript with the JS Beautifier and paste it back in.

No. This tool only expands HTML for reading. Minification belongs in your build step, where a minifier can safely collapse whitespace with knowledge of the whole page. The JS Beautifier does have a minify mode for JavaScript.

It adds the ones HTML lets you omit, such as the closing tags for li, p, td, tr, th, option, dt, and dd, because a browser infers those too. A tag that genuinely should have been closed, like a div, is closed where its parent ends, which is usually where you can see the mistake.

No. It formats whatever you give it, valid or not. For real validation use the W3C Markup Validation Service. That said, misnested output is a strong hint: an element that indents somewhere unexpected usually marks the tag you forgot to close.

Yes. Partial markup, template includes, and email snippets all work, and a stray closing tag with no opener is simply ignored rather than throwing an error.

Self-closing tags and unusual attributes pass through fine, so most template files survive. Expressions in braces or template delimiters are treated as ordinary text, though, so use Prettier locally for real JSX or Vue single-file components.

No. Parsing and formatting both run in your browser, so the markup never leaves your device and the tool keeps working with no network connection.