Pular para o conteúdo
NewKitApp

Pesquisar ferramentas

Vá para qualquer ferramenta pelo nome

HTML Beautifier

Pretty-print minified or messy HTML with proper tag indentation.

Output

Enter some HTML on the left to see the result here.

O que é HTML Beautifier?

An HTML beautifier takes minified, machine-generated, or otherwise messy markup and re-emits it with consistent line breaks and nested indentation, so the tag hierarchy — what's inside what — becomes obvious at a glance instead of buried in one long line. This is invaluable when you're inspecting a page's source, debugging a template that renders HTML as a single string, or reviewing output from a build tool or CMS that strips whitespace for production. This tool works entirely in your browser: it tokenizes the markup into tags and text, tracks nesting depth with a simple stack, and reports a clear error if it finds a closing tag that doesn't match — all without sending your markup anywhere.

Como usar HTML Beautifier

  1. Paste your HTML into the input box.
  2. The formatted, indented result appears instantly on the right.
  3. If a tag is unclosed or mismatched, the input box shows exactly which one instead of a blank or garbled result.
  4. Click "Copy" to grab the formatted output.

Exemplos

Minified markup

Entrada: <div><p>hello</p></div>

Saída: <div> <p> hello </p> </div>

Void element

Entrada: <div><img src="a.png"><p>text</p></div>

Saída: <div> <img src="a.png"> <p> text </p> </div>

Erros comuns

  • Pasting an HTML fragment that's missing a closing tag and expecting a full result — the tool will tell you which tag is unclosed instead of guessing how to close it for you.
  • Assuming reformatted <script>/<style> content means the JS or CSS itself gets prettified too — it doesn't, only the surrounding markup structure is reformatted.
  • Expecting attribute values to be reformatted or reordered — attributes are left exactly as typed inside their tag.
  • Pasting a full HTML document and expecting comments or the DOCTYPE to be stripped — they're preserved, just indented in place, since beautifying isn't the same operation as minifying.

Por que usar esta ferramenta

  • Processes entirely client-side — nothing you paste is sent to a server.
  • Correctly skips over <script>/<style> bodies instead of corrupting them.
  • Void elements are handled correctly, so indentation doesn't drift after a <br> or <img>.
  • Points at the specific mismatched or unclosed tag on error, instead of failing silently.

Perguntas frequentes