Formateador de HTML
Da formato, indenta y minifica HTML directamente en tu navegador. Pega o sube tu marcado, elige tu estilo de sangría y obtén HTML limpio y legible, o una versión minificada al instante.
100% Procesamiento del Lado del Cliente
Tu HTML se analiza y formatea completamente en tu navegador. No se sube nada a un servidor.
Da formato al HTML con una sangría consistente para que las etiquetas anidadas sean fáciles de leer y depurar.
Vista previa en vivo
La vista previa se renderiza en un marco aislado con los scripts desactivados, así que las etiquetas <script> pegadas se muestran pero nunca se ejecutan.
Índice
¿Qué es un formateador de HTML?
Un formateador de HTML reorganiza el marcado HTML ya sea para legibilidad o para tamaño. En modo Formatear (embellecer), vuelve a aplicar sangría a las etiquetas anidadas para que la estructura del documento sea fácil de revisar y depurar. En modo Minificar, elimina comentarios y espacios en blanco innecesarios para que el mismo marcado ocupe menos bytes.
Esta herramienta analiza tu HTML usando el propio analizador integrado del navegador, el mismo motor que renderiza las páginas web, así que maneja marcado real e imperfecto (etiquetas sin cerrar, mayúsculas mezcladas, comillas faltantes) igual que lo haría un navegador, y luego lo reescribe de forma limpia.
Cómo funciona
- Añade tu HTML: pega el HTML directamente en el editor o sube un archivo .html.
- Elige un modo: cambia entre Formatear para embellecer con sangría, o Minificar para comprimir de cara a producción.
- Ajusta las opciones: elige un tamaño de sangría (2, 4, 8 espacios o una tabulación) en modo Formatear, o decide si eliminar comentarios en modo Minificar.
- Copia o descarga: copia el resultado al portapapeles o descárgalo como archivo .html.
Características
- Pega HTML o sube un archivo .html
- Modo embellecer con sangría de 2, 4, 8 espacios o tabulación
- Modo minificar que elimina espacios en blanco y saltos de línea
- Eliminación opcional de comentarios en modo Minificar
- Conserva exactamente el contenido de <pre>, <script>, <style> y <textarea>
- Mantiene elementos en línea como <a>, <strong> y <em> fluyendo con naturalidad junto al texto circundante
- Vista previa aislada en vivo para confirmar que nada cambió visualmente
- Estadísticas de tamaño de salida, número de líneas y porcentaje de reducción
- Copia al portapapeles o descarga como .html
- Procesamiento 100% en el navegador para tu privacidad
Buenas prácticas
- Embellece antes de la revisión de código: una sangría consistente facilita mucho que tus compañeros detecten problemas estructurales en un diff.
- Minifica solo tu salida final: conserva un archivo fuente legible y formateado, y minifica como paso de compilación, no como el archivo que editas a diario.
- Revisa la vista previa después de minificar: confirma que la página renderizada se ve igual, sobre todo en texto en línea sensible a los espacios.
- Elimina comentarios solo cuando termines de depurar: los comentarios suelen aportar contexto para la próxima persona que toque el archivo, así que consérvalos en el código fuente y elimínalos solo en la versión minificada.
- Ajusta el ancho de sangría de tu equipo: configura el tamaño de sangría según la configuración del editor de tu proyecto (por ejemplo, .editorconfig) para que la salida formateada no genere diffs ruidosos.
Solución de problemas
El resultado formateado se ve distinto de lo que pegué
El analizador HTML del navegador corrige automáticamente problemas estructurales como etiquetas sin cerrar o comillas faltantes, así que el resultado refleja la estructura corregida, tal como la renderizaría un navegador real.
El orden o las comillas de los atributos cambiaron
Los atributos se vuelven a serializar en el orden en que fueron analizados, y los atributos booleanos como disabled se escriben sin valor. Esto no afecta el renderizado, pero puede cambiar un diff de texto.
El texto dentro de <pre> o <script> se ve intacto
Eso es intencional: el contenido dentro de <pre>, <script>, <style> y <textarea> se conserva exactamente igual, ya que los espacios en blanco y saltos de línea suelen ser significativos ahí.
El resultado minificado todavía contiene algunos espacios
Se conserva un único espacio entre palabras dentro de una línea de texto para que no se junten; solo se eliminan los espacios redundantes entre etiquetas y los espacios repetidos.
Casos de uso comunes
- Limpiar HTML extraído o exportado: da formato al marcado obtenido de una exportación de CMS, una plantilla de correo o un scraper web para que vuelva a ser legible.
- Revisión de código y depuración: embellece HTML minificado o comprimido de producción para rastrear un problema de diseño o de marcado.
- Reducir el peso de la página: minifica plantillas HTML estáticas o marcado de correo antes de desplegarlas para reducir el tamaño de transferencia.
- Estandarizar un proyecto: da formato a los archivos HTML con un estilo de sangría consistente antes de confirmarlos en un repositorio compartido.
- Preparar fragmentos de HTML para documentación: embellece ejemplos de HTML incrustados para que sean fáciles de leer en un tutorial o un README.
Preguntas frecuentes
No. La vista previa se renderiza dentro de un iframe aislado con los scripts desactivados, así que las etiquetas <script> pegadas se muestran pero nunca se ejecutan.
No. Ambos modos solo cambian los espacios en blanco, la sangría y la forma de serializar los atributos; la estructura real del marcado y el resultado visible se mantienen iguales.
Usa el analizador integrado del navegador, que corrige automáticamente problemas comunes como etiquetas sin cerrar, así que el resultado siempre es válido, pero no señala ni explica qué se corrigió.
Se conserva exactamente igual tanto en modo Formatear como en modo Minificar, ya que los espacios en blanco dentro de esos elementos suelen ser significativos.
Sí. En modo Formatear puedes elegir 2, 4 u 8 espacios, o un carácter de tabulación.
Solo si activas la opción "Eliminar comentarios HTML"; por defecto, los comentarios se conservan.
No. Todo ocurre localmente en tu navegador y nada se sube ni se guarda.