Skip to content

Formateador, Embellecedor y Minificador HTML

Formatea, embellece y minifica HTML al instante en tu navegador. Indenta el marcado desordenado o comprímelo para producción — gratis, privado, tu HTML nunca sale de tu dispositivo.

Sin rastreo Se ejecuta en el navegador Gratis
Sangría
HTML formateado

🔒 100% en el navegador — tu HTML nunca sale de tu dispositivo.

Revisado para formateo seguro en renderizado y minificación consciente de espacios en blanco — Equipo de Ingeniería de Go Tools · Jun 5, 2026

¿Qué es el formateo de HTML?

El formateo de HTML (también llamado embellecimiento o pretty-printing) reescribe el marcado con anidamiento, sangría y saltos de línea consistentes para que su estructura sea fácil de leer y editar. La página se renderiza de forma idéntica antes y después — solo cambian los espacios en blanco. La minificación hace lo contrario: elimina los comentarios y colapsa los espacios en blanco — incluyendo CSS y JS embebidos — para que las páginas carguen más rápido. Esta herramienta hace ambas cosas, enteramente en tu navegador.

Características principales

Formatear y minificar

Embellece el marcado desordenado para mejorar la legibilidad o comprímelo — incluyendo CSS y JS inline — para producción.

Indicador de bytes ahorrados

Consulta exactamente cuántos bytes ahorró la minificación en cada ejecución.

100% privado

Todo el procesamiento ocurre en tu navegador. Tu HTML nunca se envía a un servidor.

Controles de estilo

Elige sangría de 2 espacios, 4 espacios o tabulación para adaptarte a tus convenciones.

Ejemplos

Marcado minificado

<nav><ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul></nav>

Expande el marcado de una sola línea en un árbol legible e indentado.

Formulario con atributos

<form action="/submit" method="post"><input type="email" name="email" required><button type="submit">Send</button></form>

Despliega los controles de formulario y sus atributos línea por línea.

Tabla

<table><thead><tr><th>Name</th><th>Role</th></tr></thead><tbody><tr><td>Ada</td><td>Engineer</td></tr></tbody></table>

Indenta las secciones anidadas de la tabla para que la estructura sea obvia.

SVG inline

<svg viewBox="0 0 24 24"><path d="M5 12h14"/><path d="M12 5v14"/></svg>

Formatea el marcado SVG inline para mejorar la legibilidad.

Casos de uso comunes

Limpiar marcado generado
Embellece el HTML exportado por un CMS o constructor para poder leerlo y editarlo.
Revisión de código
Formatea el marcado antes de un pull request para obtener plantillas consistentes y comparables.
Enviar páginas más ligeras
Minifica el HTML de producción para reducir el tamaño y mejorar el tiempo de carga.
Inspeccionar un fragmento
Pega el marcado copiado de una página y fomátealo para entender su estructura.

Detalles técnicos

Embellecido con js-beautify
Utiliza el motor HTML probado de js-beautify para una indentación predecible y configurable.
Minificado con CSSO + Terser
Colapsa espacios en blanco, elimina comentarios y minifica CSS y JS embebidos sin alterar el renderizado.
Basado en el navegador
Se ejecuta completamente en el lado del cliente; ningún HTML sale de tu dispositivo ni llega a un servidor.

Buenas prácticas

Formatea el código fuente, minifica para producción
Mantén HTML legible en tu repositorio y minifica como paso de compilación.
Elige un estilo de sangría
Acuerda usar 2 espacios, 4 espacios o tabulaciones para obtener diffs limpios.
Cuidado con los espacios en pre/textarea
La minificación puede afectar elementos sensibles a espacios en blanco como pre y textarea — verifica después de comprimir.

Preguntas frecuentes

¿Cómo formateo HTML online?
Pega tu HTML en el campo de entrada y haz clic en Formatear. La herramienta reindenta el marcado con anidamiento y saltos de línea correctos, y luego te permite copiarlo. Todo se ejecuta localmente en tu navegador — no se sube nada.
¿Cómo minificar HTML?
Pega tu HTML y haz clic en Minificar. La herramienta elimina los comentarios y colapsa los espacios en blanco — incluyendo CSS y JavaScript embebidos — para producir el marcado equivalente más pequeño, y muestra cuántos bytes ahorraste.
¿Cuál es la diferencia entre formatear y minificar HTML?
Formatear (embellecer) añade sangría y saltos de línea para hacer el marcado legible. Minificar elimina los comentarios y espacios en blanco para reducir el tamaño del archivo y acelerar la carga. Ambos se renderizan de forma idéntica en el navegador.
¿El formateo cambia cómo se renderiza mi página?
El formateo solo añade espacios en blanco, lo cual es seguro para el marcado normal. Ten en cuenta que los elementos sensibles a espacios en blanco como pre y textarea pueden verse afectados por el reformateo o la minificación agresiva — verifícalos después del procesamiento.
¿Es seguro mi HTML con esta herramienta?
Sí. Todo el formateo y la minificación ocurren localmente en tu navegador mediante JavaScript — tu HTML nunca se envía a ningún servidor, ni se registra, ni se almacena. Esto lo hace seguro para marcado propietario o no publicado, a diferencia de las herramientas del lado del servidor que reciben una copia de todo lo que pegas.
¿Minifica también el CSS y JavaScript inline?
Sí. El minificador comprime también el contenido de style y script, por lo que un solo paso reduce todo el documento — marcado, estilos y scripts juntos.
¿Qué sangría debo usar para HTML?
Dos espacios es el valor predeterminado más común y mantiene los diffs compactos; cuatro espacios puede ayudar con layouts profundamente anidados; las tabulaciones permiten que cada desarrollador elija su ancho. Elige uno y aplícalo de forma consistente — esta herramienta admite los tres.

Herramientas relacionadas

Ver todas las herramientas →