Formateador de HTML
Funciona por completo en tu navegador. Tus archivos y datos nunca salen de tu dispositivo.
Acerca de esta herramienta
Pega un documento o fragmento de HTML y esta herramienta lo formateará con la sangría adecuada, o lo reducirá a una sola línea compacta.
¿Qué pasa con el marcado mal formado?
Nada se rompe. El formateador usa js-beautify, que trabaja con tokens en lugar de construir un árbol DOM estricto, así que las etiquetas sin cerrar, las de cierre mal emparejadas o un documento sin <head> se siguen formateando en vez de generar un error. Puedes elegir sangría de 2 espacios, 4 espacios o tabulación. La minificación funciona de forma parecida: es una serie de pasadas de texto que eliminan comentarios y colapsan espacios entre etiquetas, y deja intacto el marcado mal cerrado o mal anidado en lugar de intentar arreglarlo. En ambos casos puedes limpiar HTML descuidado sin tener que localizar antes cada etiqueta rota.
Un detalle que la minificación sí cuida es el contenido de <pre>, <textarea>, <script> y <style>. El espacio en blanco dentro de esas etiquetas suele tener significado (los saltos de línea de un bloque <pre>) o ser código real que colapsar podría romper (JavaScript o CSS en línea), así que la herramienta ignora esos bloques y solo toca el espacio entre etiquetas normales.
¿Se sube algo de esto a algún sitio?
No. El formateo y la minificación ocurren completamente en tu navegador, usando la biblioteca js-beautify cargada en la página; nada se envía a un servidor. Eso significa que plantillas de página, marcado de correos electrónicos o fragmentos extraídos con datos reales de clientes pueden pasar por esta herramienta sin salir de tu equipo.
¿Para qué sirve?
Los casos habituales son ordenar una página minificada guardada desde “ver código fuente” para poder leerla, reducir el peso de una plantilla de correo HTML antes de enviarla, o reformatear el marcado de un componente con un ancho de sangría constante antes de una revisión de código. También funciona al revés: si tienes HTML escrito a mano con espaciado inconsistente y quieres una sola línea compacta para pegar en un valor de configuración o un atributo data-*, la minificación lo resuelve en un paso.
Alternar entre los dos modos también es una forma rápida de comparar dos versiones de una página, porque las herramientas de diff funcionan mucho mejor sobre marcado con formato consistente que sobre una mezcla de estilos de sangría. Si mantienes un sitio estático o una biblioteca de componentes, pasar por aquí el HTML generado o copiado antes de confirmarlo mantiene todo el código con el mismo aspecto, aunque las piezas originales vengan de sitios distintos.