El formato es la parte del flujo de trabajo con código que nadie nota hasta que falta: un bloque de HTML se lee como una sola palabra larga, y ese mismo bloque se convierte en un árbol en cuanto la sangría es correcta. Un formateador no cambia el significado de tu marcado, cambia lo que cuesta mirarlo, y esa diferencia es donde se va gran parte del tiempo de depuración. El Formatador HTML funciona por completo en tu navegador: pegas el marcado, eliges un modo y el resultado aparece en el panel de al lado. Nada se sube y nada sale de la pestaña, lo cual importa cuando la página que limpias contiene claves API, nombres de host internos o datos de clientes que no querrías pegar en un servicio de terceros.
La herramienta trabaja en dos direcciones y responde a dos preguntas distintas. El modo formato pregunta: ¿cómo se ve esta estructura cuando los espacios en blanco son honestos? El modo minificar pregunta: ¿qué tan pequeño puede quedar este archivo sin un solo cambio de comportamiento? El resto de esta guía explica cómo funciona cada paso, qué le pasa a una página real de 458 caracteres en cada modo, qué partes del documento el minificador se niega a tocar y cuáles borra, cómo configuran la sangría y la lista de elementos en línea la salida formateada, y dónde se sitúa esta herramienta frente a las demás herramientas de formato de la colección.
Cómo funciona un formateador HTML: dos modos, una pegada
Los dos modos leen la misma cadena de entrada y escriben un resultado de texto plano en el panel de salida; la diferencia es la transformación aplicada. El modo formato entrega el marcado al motor HTML de js-beautify con un conjunto fijo de opciones: sangría de dos o cuatro espacios, sin ajuste de línea, sin salto final, sin sangría dentro de los elementos en línea, y una lista de elementos cuyo contenido nunca se parte entre líneas. El modo minificar ejecuta un pipeline a medida: primero extrae todos los bloques script, textarea y pre del documento y los deja a un lado, luego quita los comentarios HTML, colapsa cada racha de espacios en blanco a un solo espacio, elimina los espacios alrededor de las uniones de etiquetas y por último devuelve los bloques protegidos byte a byte.
Ese orden es todo el diseño. Colapsar espacios en blanco es seguro para el marcado y hasta para el CSS dentro de una etiqueta style, porque en ambos lenguajes una racha de espacios y saltos de línea equivale a un solo espacio. No es seguro dentro de una etiqueta pre, donde los espacios en blanco son el contenido, ni dentro de un script, donde el minificador pegaría declaraciones sin protestar. Extraer y luego restaurar es lo que permite hacer pases agresivos sobre el resto del documento mientras esas tres regiones salen exactamente como entraron, saltos de línea incluidos.
El caso estándar: una página de 458 caracteres queda en una línea de 281
Toma una página escrita a mano: un doctype, un head con charset, un título, un bloque style pequeño y un body con una tarjeta que contiene un encabezado, un párrafo y un botón. Escrita como la escribe la gente de verdad, con la sangría que uno teclearía y un comentario de borrador sobrante, son 458 caracteres en 28 líneas. Pásala por el modo formato y la página vuelve con 390 caracteres en 27 líneas: el título y el encabezado con exceso de sangría se recolocan en su propia línea, la estructura se reancla a un ritmo constante de dos espacios y el comentario de borrador queda en su sitio. Si el estándar de tu proyecto son cuatro espacios, el mismo pase devuelve un documento con el mismo número de líneas pero con sangría más ancha.
Si en vez de eso pasas la misma página de 458 caracteres por el modo minificar, el resultado es 281 caracteres en una sola línea, una reducción del 38,6 por ciento. El comentario de borrador desapareció, la sangría desapareció, los espacios entre etiquetas desaparecieron, y lo que queda es el mismo documento: mismos elementos, mismos atributos, mismo texto, mismo CSS. Si quieres las cifras de antes y después una al lado de la otra sin hacer la cuenta a mano, el Contador y analizador de caracteres lee la longitud de cualquiera de los paneles y convierte el ahorro en un número que puedes citar en una solicitud de cambios.
Qué protege el minificado y qué elimina
Tres tipos de bloques se sacan del documento antes de que ocurra cualquier colapso: script, textarea y pre. Una página que contiene un script con dos asignaciones, cada una en su propia línea, regresa del minificado con los dos saltos de línea intactos, porque el bloque entero, de la etiqueta de apertura a la de cierre, viaja al resultado sin tocarse. Un bloque pre que depende de espacios dobles y saltos de línea para verse como una lista de código conserva todos y cada uno de ellos. La protección es byte a byte, no línea a línea, así que también cubre los espacios que parecen accidentales pero cargan peso, como los que evitan que un elemento en línea se fusiona con su vecino.
La protección es una frontera, no un destino. El script dentro de un bloque protegido queda a salvo del pase HTML, y eso es todo lo que el pase HTML puede prometer: el minificado real de JavaScript es una cuestión de sintaxis, donde se pueden borrar declaraciones muertas, paréntesis redundantes y nombres de identificadores seguros, y eso lo hace el Formateador y Minificador de JavaScript con un motor que analiza el código en lugar de hacer coincidencias por patrón. La etiqueta style está en el otro lado de la frontera: su CSS no está protegido, recibe el tratamiento de espacios en blanco, las reglas permanecen, los espacios se reducen y el resultado sigue siendo CSS válido. Cuando la hoja de estilos merece un pase más profundo, el Minificador CSS toma el relevo, con un motor que sabe dónde un espacio entre un selector y una declaración carga peso y dónde es puro ruido.
Todo lo que queda fuera de esos bloques recibe el tratamiento completo, y hay dos detalles que conviene conocer. Los comentarios HTML se eliminan por completo, y el pase ejecuta la eliminación de comentarios dos veces, una antes del colapso de espacios en blanco y otra después, porque el colapso puede juntar dos medio comentarios en uno que solo existe en la forma colapsada. Y los espacios alrededor de las uniones de etiquetas, los huecos entre un corchete de cierre y el siguiente corchete de apertura, desaparecen, de modo que la salida es una línea continua de corchetes. Un rasgo que cabe esperar: donde estaba un bloque protegido dentro del flujo, puede quedar un solo espacio en su lugar, porque el colapso ocurrió alrededor de un marcador, no alrededor de la etiqueta real. Nada se rompe; el archivo sigue siendo válido, simplemente no está tan apretado como el resto de la línea.
Modo formato: sangría, ajuste y la lista de elementos en línea
El formateador expone una sola configuración que la mayoría cambia, y es el ancho de sangría: dos espacios por defecto, cuatro como alternativa. En la muestra de 197 caracteres y cinco líneas con un comentario y un script pequeño, el pase de dos espacios devuelve 244 caracteres en 18 líneas, y el pase de cuatro espacios devuelve las mismas 18 líneas con 278 caracteres. Misma estructura, mismo número de líneas, más margen horizontal; la elección es una convención de equipo, no una cuestión de corrección. El ajuste de línea está desactivado a propósito, para que una lista larga de atributos quede en una sola línea en lugar de partirse en una columna arbitraria, y la salida termina justo donde termina la última etiqueta, sin salto final añadido.
La configuración más sutil es la lista de elementos tratados como en línea: a, span, td, th, small, pre y code. Para esas etiquetas el motor se niega a partir la línea entre el corchete de apertura y el de cierre, así que un enlace que envuelve una palabra a mitad de frase se queda en una línea, y una celda de tabla no fragmenta su contenido por toda la página. Esa lista es la razón por la que la salida formateada de una página con mucho texto se lee como si la hubieras sangrado a mano: los elementos de bloque se apilan, los elementos en línea fluyen, y nada a mitad de una frase recibe un salto de línea de más.
Formatos vecinos: JSON, XML y dónde se sitúa cada formateador
HTML es el más indulgente de los lenguajes de marcado, que es exactamente la razón por la que más se le abusa de los espacios en blanco. Un payload JSON, en cambio, se rompe en cuanto se cuela una coma de más o un espacio final, así que tiene su propia herramienta con un validador que te dice la línea y el motivo: el Formatador JSON lee el mismo tipo de pegotajo y lo devuelve formateado o rechazado, el compañero ideal cuando el HTML que limpias incrusta un objeto de configuración en una etiqueta script. El XML es el primo más estricto, donde un corchete desparejado es un error duro y no una suposición del navegador, y el Formatador XML maneja esa familia de documentos con el mismo patrón de formato más minificado.
La división sirve para que cada formato tenga un motor que lo hable de verdad: un reordenamiento de HTML para el documento, un motor que entiende CSS para las hojas de estilos y un parser de JS para los scripts. Pasar las cuatro herramientas sobre una misma página es la misma división de trabajo que un sistema de construcción hace con su cadena de herramientas, solo que sin la construcción: formateas el documento, minificas las cargas y publicas el resultado. El formateador HTML es la pieza que mantiene la estructura legible en medio, y es justo la parte que un minificador genérico arruina primero, porque optimiza el tamaño de archivo mientras tú sigues editando.
Leer el resultado antes de publicarlo
El panel de salida es toda la superficie de revisión, así que vale la pena leerlo como lo leería un revisor. En el modo formato, mira primero la estructura: ¿los bloques se anidan como esperas, la lista de elementos en línea mantiene el texto legible, y hay algún elemento al que el ritmo de dos espacios le hizo más difícil de seguir? El comentario que el minificado borra es el único punto donde los dos modos discrepan sobre qué contiene tu archivo, y si ese comentario cargaba peso para la siguiente persona, la versión a conservar es la del modo formato.
En el modo minificar la revisión es más corta y más mecánica. El archivo debería ser una línea, las etiquetas deberían ser contiguas y las regiones protegidas deberían sobrevivir: abre la salida, localiza el script y confirma que los saltos de línea siguen ahí. Si necesitas la página como texto plano en lugar de marcado, el Convertidor HTML a texto quita las etiquetas y devuelve la vista de lectura, el movimiento correcto cuando el entregable es un pegado en un documento y no un despliegue. Y cuando la configuración que mueve la página vive en un archivo YAML al lado del marcado, el Formatador YAML le da a ese archivo el mismo tratamiento. Pegar, elegir modo, leer la salida, copiarla: todo el ciclo queda en la pestaña que tiene el archivo, de principio a fin.