Formateador HTML

Un HTML minificado que llega en una sola línea de 40.000 caracteres es ilegible, y un HTML indentado a mano y retocado seis veces no es mucho mejor. La herramienta de arriba trabaja en los dos sentidos: reindenta el marcado para que puedas leerlo o lo deja en lo mínimo para que puedas publicarlo.

Cómo funciona

Pega tu marcado, elige formatear o minificar y selecciona una sangría de 2 o 4 espacios. Todo se ejecuta en el navegador — no se sube nada, algo importante cuando la página que estás depurando contiene tokens de sesión o datos de clientes.

Formatear divide la entrada en tokens y la vuelve a escribir con un nodo por línea, aumentando la sangría tras una etiqueta de apertura y reduciéndola antes de una de cierre. Tres detalles hacen que el resultado sea correcto y no solo ordenado:

• Los elementos vacíos — <br>, <img>, <input>, <meta>, <link> y los demás elementos vacíos (void elements) de HTML5 — nunca abren un nivel, así que el contenido que viene detrás no queda indentado por error debajo de ellos.
• Los elementos de texto sin procesar — <script>, <style> y <textarea> — se recorren hasta la etiqueta de cierre literal, tal como especifica el modelo de contenido de HTML5. Por eso un < dentro de una cadena de JavaScript o de un selector CSS no se confunde con el inicio de una etiqueta.
• Los comentarios y el doctype se mantienen intactos.

Minificar condensa las secuencias de espacios en blanco y lo junta todo en una sola línea. Los espacios en blanco que contienen un salto de línea se consideran formato y se eliminan; un simple espacio en línea — el que separa dos elementos <span> contiguos en la misma línea — se conserva como un único espacio, porque quitarlo juntaría visualmente las dos palabras.

Lo que no hace, a propósito

Es un formateador, no un validador ni un sanitizador. Reindentará sin quejarse un marcado con un <div> sin cerrar, y el resultado delatará el anidamiento incorrecto con una sangría que nunca vuelve al margen izquierdo — a menudo es la forma más rápida de encontrar la etiqueta sin cerrar, pero no es un mensaje de error. Para comprobar la conformidad, pasa el marcado por el validador del W3C.

Tampoco minifica el contenido de <script> y <style>. Se conserva tal cual, porque comprimir JavaScript de forma segura exige analizarlo como JavaScript, y una expresión regular que lo intente acabará rompiéndose con algún template literal. Para eso, usa un bundler de verdad.

El orden de los atributos, el estilo de comillas y el uso de mayúsculas y minúsculas quedan exactamente como los escribiste. La herramienta solo cambia los espacios en blanco, nada más, de modo que un archivo formateado y su versión minificada siempre representan el mismo documento.

Cuándo usar cada modo

Formatear sirve para leer: inspeccionar el código fuente de una página, revisar el diff de una plantilla o averiguar por qué un fragmento renderizado en el servidor se anida de forma distinta a lo que sugiere la plantilla. La sangría deja a la vista errores estructurales que un bloque de texto compacto oculta.

Minificar sirve para el transporte, y aporta menos que antes. Si el HTML se sirve por HTTP con gzip o Brotli, quitarle los espacios en blanco suele ahorrar solo un pequeño porcentaje, porque la compresión ya maneja bien los espacios repetidos. Aun así, ayuda con contenido que tiene que caber en un presupuesto fijo — una plantilla de correo electrónico, un bloque de CSS crítico en línea, un atributo data que contiene un fragmento.

No minifiques lo que ya va a minificar un paso de build, y nunca hagas commit de HTML minificado como código fuente: la versión legible es la que tienen que mantener las personas.

Lecturas y herramientas relacionadas

Si estás formateando marcado para entenderlo, conviene conocer directamente las reglas de estructura: lo esencial de HTML5 explica las categorías de elementos, qué elementos pueden contener a cuáles y por qué existen las distinciones entre elementos vacíos y de texto sin procesar mencionadas arriba. Cuando el marcado lo genera una capa de vista en lugar de escribirse a mano, Spring MVC muestra dónde encaja la plantilla en el flujo de una petición.

Para hacer lo mismo con datos en lugar de marcado, usa el formateador de JSON o el formateador de YAML.