Qué hace este formateador de HTML
Cuando copias el código fuente de una página, exportas una plantilla de correo o guardas el HTML que genera una herramienta, casi siempre llega minificado: todo pegado en una sola línea kilométrica, sin saltos ni sangría. Es válido para el navegador, pero imposible de leer o revisar a ojo. Este formateador reescribe ese mismo HTML en un bloque ordenado, con un salto de línea por etiqueta y dos espacios de sangría por cada nivel de anidamiento.
Todo ocurre dentro de tu navegador con JavaScript. No hay servidor, no se sube nada y no se ejecuta el HTML: solo se reorganiza el texto para que sea legible. Puedes pegar plantillas internas, correos con datos de clientes o fragmentos privados sin que salgan de tu pantalla.
Cómo usarlo
- Pega tu HTML en el cuadro de entrada (o pulsa Cargar ejemplo para ver una demostración).
- La versión embellecida aparece al instante debajo; no hace falta pulsar ningún botón.
- Pulsa Copiar para llevar el HTML formateado al portapapeles.
- Con Limpiar vacías el cuadro y empiezas de cero.
Qué reglas de sangría aplica
El formateador recorre el HTML separándolo en piezas (etiquetas de apertura, de cierre, texto, comentarios y DOCTYPE) y luego decide la sangría con reglas simples y predecibles.
| Elemento | Qué hace el formateador |
|---|---|
Etiqueta de bloque de apertura (<div>, <ul>, <body>) | Baja a una línea nueva y aumenta la sangría un nivel |
Etiqueta de cierre (</div>) | Reduce la sangría un nivel y se coloca alineada con su apertura |
Etiquetas void (br, img, input, meta, link, hr) | Se tratan como autocerradas: ocupan su línea pero no abren sangría |
<tag>texto</tag> sencillo | Se mantiene en una sola línea (<li>Uno</li>) |
script, style, pre, textarea | Su contenido se conserva tal cual, sin reindentar |
La sangría es de 2 espacios por nivel. Un elemento que solo contiene texto, como <title>Demo</title>, se deja en una única línea para no inflar el resultado. Los caracteres especiales que ya estaban escapados (&, <) se respetan sin tocar.
Ejemplo resuelto
Partimos de este documento minificado, escrito de un tirón en una sola línea:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Demo</title></head><body><h1>Hola</h1><p>Texto</p></body></html>El formateador lo convierte en:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<h1>Hola</h1>
<p>Texto</p>
</body>
</html>Observa el resultado: <html> abre el primer nivel, así que <head> y <body> quedan sangrados con dos espacios. Dentro de <head>, la etiqueta void <meta> ocupa su línea sin abrir sangría, mientras que <title>Demo</title> cabe en una sola línea por contener solo texto. Cuando aparece </head>, la sangría vuelve a un nivel para que <body> quede alineado. El árbol de etiquetas es idéntico al original: solo cambian los espacios y los saltos de línea.
Tu HTML no sale del navegador
No se envía nada a ningún servidor ni se guarda historial. El formateo es puro procesamiento de texto local, lo que importa cuando la plantilla contiene enlaces internos, direcciones de correo o datos incrustados. Cierra la pestaña y no queda rastro.
Preguntas frecuentes
¿Cambia el resultado que ve el navegador?
No. El formateador solo añade saltos de línea y sangría entre etiquetas; no borra ni reordena elementos ni atributos. El árbol del documento es el mismo, así que la página se renderiza igual. La única excepción práctica son los espacios en blanco de texto suelto, que se compactan a un espacio (el navegador ya los trataría así fuera de pre).
¿Por qué no indenta el contenido de script o style?
Porque este es un formateador de HTML, no de JavaScript ni de CSS. Reindentar el código dentro de script, style, pre o textarea podría romper cadenas de texto, expresiones regulares o espacios significativos. Por seguridad, ese contenido se copia exactamente como lo escribiste y solo se ajusta la etiqueta que lo rodea.
¿Qué pasa con las etiquetas void como <br> o <img>?
Se tratan como autocerradas. Ocupan su propia línea con la sangría del nivel actual, pero no abren un nivel nuevo, porque no tienen etiqueta de cierre. Da igual si las escribes como <br> o como <br/>: la herramienta conserva la forma que usaste.
¿Sirve para HTML mal cerrado o incompleto?
Hace lo posible sin romperse. Si falta una etiqueta de cierre, la sangría de las líneas siguientes puede quedar desplazada, pero la herramienta nunca lanza un error ni pierde tu texto. Para un resultado impecable conviene partir de HTML bien balanceado; aun así, un fragmento suelto se formatea sin problemas.
¿Puedo revertir el proceso y volver a minificar?
Este formateador solo embellece. Como no altera la estructura, si más adelante quitas los saltos y espacios sobrantes entre etiquetas recuperas un HTML equivalente al de partida. Para ese paso inverso usa un minificador; el árbol de etiquetas se mantiene intacto en ambos sentidos.