HTML Formatter

How it works

1. Paste or type your HTML into the input panel.
2. Your browser parses the HTML with its native parser (DOMParser), which tolerates unclosed tags or incomplete HTML.
3. A custom serializer walks the resulting tree and produces an indented version, respecting the rules for each element type.
4. The content of pre, textarea, script, and style is preserved exactly as-is, without re-indenting it, because whitespace and line breaks are meaningful inside those elements.
5. Copy the result or download it as an .html file.

Use cases

• Format minified HTML pulled from a page's source code to make it readable.
• Clean up HTML generated by automated tools or exported from visual editors.
• Review the structure of HTML templates before integrating them into a project.
• Debug malformed HTML (unclosed tags) by seeing how the browser interprets it.

Common mistakes

• Esperar que el contenido de <script> o <pre> se reindente igual que el resto del HTML.
  Estos elementos preservan espacios significativos; la herramienta los deja intactos a propósito para no romper su comportamiento o apariencia.
• Pegar HTML con etiquetas mal cerradas y esperar que la herramienta muestre un error.
  El parser del navegador es tolerante e intenta reconstruir un árbol válido, igual que al renderizar una página real; el resultado formateado refleja esa reconstrucción, no un error.
• Usar esta herramienta para formatear JSX o plantillas con lógica de un framework (Vue, Angular).
  Está pensada para HTML estándar; la sintaxis específica de un framework puede no formatearse como esperás.

Frequently asked questions

Alternatives

Extensiones de editor como Prettier hacen lo mismo dentro de tu flujo de trabajo habitual. Esta herramienta es útil para un formateo puntual sin configurar nada, por ejemplo al pegar HTML copiado de otra página.