Resumen
Este formateador reorganiza etiquetas, anidaciones y espacios para que el marcado sea más fácil de revisar y editar. Mantiene el orden de los elementos y el contenido, pero hace que la jerarquía se vea enseguida. Resulta útil cuando el HTML viene de un CMS, de la salida de una compilación o de varias fuentes distintas. Al funcionar en el navegador, es práctico para revisar fragmentos, comparar versiones de plantillas o preparar código para retoques manuales.
Casos de uso
- Revisar salida de un CMSOrdena el HTML generado por un editor de contenidos antes de buscar contenedores faltantes o anidaciones incorrectas.
- Comparar dos versiones de una plantillaFormatea ambas versiones antes de hacer un diff para detectar cambios estructurales con más facilidad.
- Limpiar HTML de correosRevisa fragmentos largos con tablas y elementos en línea en una forma más clara para editarlos mejor.
- Preparar snippets para documentaciónMuestra el código al equipo en una forma ordenada para entender antes la estructura del componente.
Como funciona
- 1
Pega tu HTML en el campo de entrada.
- 2
Ajusta la sangría o el tratamiento de comentarios si esas opciones están disponibles.
- 3
Ejecuta el formateador para generar HTML ordenado.
- 4
Copia el resultado y úsalo en tu editor, notas o proyecto.
Ejemplos
Tarjeta de producto compacta
Entrada: <article><h3>Pro Plan</h3><p>Everything included</p><a href="/pricing">View plans</a></article>
Salida: <article> <h3>Pro Plan</h3> <p>Everything included</p> <a href="/pricing">View plans</a> </article>
Convierte un componente en una sola línea en un bloque legible.
Fragmento con diseño anidado
Entrada: <div class="wrap"><header><nav><a href="/">Home</a><a href="/docs">Docs</a></nav></header><main><section><img src="hero.jpg" alt="Hero"></section></main></div>
Salida: <div class="wrap"> <header> <nav> <a href="/">Home</a> <a href="/docs">Docs</a> </nav> </header> <main> <section> <img src="hero.jpg" alt="Hero"> </section> </main> </div>
Separa una estructura densa en secciones semánticas claras.
Fragmento de tabla de email
Entrada: <table><tr><td><strong>Order #4821</strong></td><td align="right">Shipped</td></tr><tr><td colspan="2"><a href="https://example.com">Track package</a></td></tr></table>
Salida: <table> <tr> <td><strong>Order #4821</strong></td> <td align="right">Shipped</td> </tr> <tr> <td colspan="2"> <a href="https://example.com">Track package</a> </td> </tr> </table>
Muestra cómo el HTML de tablas se vuelve más fácil de inspeccionar y editar.
FAQ
¿El formateo cambia el orden de atributos o el contenido?
No debería cambiar el significado del HTML. El objetivo es mejorar la sangría y la presentación, no reescribir el contenido.
¿Por qué parte del HTML en línea sigue en una sola línea?
Las estructuras inline cortas pueden mantenerse compactas si el formateador las conserva así. Suele ser normal y evita ruido innecesario.
¿Qué pasa con HTML mal formado?
El marcado muy roto puede formatearse, pero el resultado dependerá de cómo el parser interprete la estructura. Conviene corregir primero los errores de etiquetas.
¿Puedo eliminar comentarios al formatear?
Si la opción de eliminar comentarios está activada, pueden quitarse. Si no, se conservarán.
¿Por qué el resultado difiere del prettify de mi editor?
Cada formateador usa reglas distintas para saltos de línea, espacios en blanco y elementos vacíos. Las pequeñas diferencias son normales.