UlvixorFormateador de HTML
Pega HTML sin indentar, minificado o mal formado y obtén una versión legible con indentación consistente. El formateo se hace analizando el HTML con el parser nativo del navegador y recorriendo el árbol resultante, sin depender de ninguna librería externa.
Cómo funciona
- Pega o escribe tu HTML en el panel de entrada.
- El navegador analiza el HTML con su parser nativo (DOMParser), que es tolerante con etiquetas mal cerradas o HTML incompleto.
- Un serializador propio recorre el árbol resultante y genera una versión indentada, respetando las reglas de cada tipo de elemento.
- El contenido de pre, textarea, script y style se preserva tal cual, sin reindentarlo, porque en esos elementos los espacios y saltos de línea son significativos.
- Copia el resultado o descárgalo como archivo .html.
Casos de uso
- Formatear HTML minificado obtenido del código fuente de una página para poder leerlo.
- Ordenar el HTML generado por herramientas automáticas o exportado desde editores visuales.
- Revisar la estructura de plantillas HTML antes de integrarlas en un proyecto.
- Depurar HTML mal formado (etiquetas sin cerrar) viendo cómo lo interpreta el navegador.
Casos de uso
- Formatear HTML minificado obtenido del código fuente de una página para poder leerlo.
- Ordenar el HTML generado por herramientas automáticas o exportado desde editores visuales.
- Revisar la estructura de plantillas HTML antes de integrarlas en un proyecto.
- Depurar HTML mal formado (etiquetas sin cerrar) viendo cómo lo interpreta el navegador.
Errores comunes
- 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 esperas.
Preguntas frecuentes
No. El análisis y formateo del HTML ocurren completamente en tu navegador usando DOMParser y un serializador propio en JavaScript. Tu HTML nunca sale de tu equipo.
Son elementos 'vacíos' (void elements) que nunca tienen contenido ni etiqueta de cierre en HTML. La herramienta los reconoce y los formatea correctamente como <br>, <img ...> o <input ...>, sin intentar cerrarlos ni anidar contenido dentro de ellos.
Dentro de pre, textarea, script y style, los espacios en blanco y saltos de línea forman parte del significado del contenido (por ejemplo, el código fuente de un script o el formato visual de un bloque pre). Reindentarlos automáticamente cambiaría su comportamiento o apariencia, así que la herramienta los preserva exactamente como están.
El parser HTML del navegador es intencionalmente tolerante: intenta reconstruir un árbol razonable incluso con etiquetas sin cerrar o mal anidadas, igual que lo haría al renderizar una página. La herramienta formatea el resultado de esa reconstrucción en lugar de fallar.
Alternativas
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.