Ordena el HTML desordenado y conviértelo en código limpio e indentado

Pega cualquier HTML —incluso una salida minificada en una sola línea de un pipeline de compilación— y la herramienta lo reformatea con la sangría adecuada, una etiqueta por línea y espacios en blanco coherentes. Elige una sangría de 2, 4 u 8 espacios. El resultado está listo para colocarlo en tu editor o pegarlo en un comentario de revisión de código.

Embellecer expande el HTML para facilitar su lectura: cada etiqueta en su propia línea, los elementos anidados con sangría y las líneas en blanco conservadas entre secciones. Minificar elimina los comentarios, comprime las secuencias de espacios y quita los saltos de línea para que el archivo ocupe menos bytes. Usa Embellecer para editar y revisar, y Minificar para la implementación en producción.

No: js-beautify (el motor que funciona internamente) detecta los bloques script y style y formatea su contenido con las reglas adecuadas de JS o CSS, de modo que los scripts en línea siguen siendo válidos y las hojas de estilo legibles. Las etiquetas de cierre automático, los elementos vacíos y los atributos con espacio de nombres (svg:xmlns, xlink:href) se gestionan todos correctamente.

Maneja bien el HTML plano y las plantillas similares a HTML, pero el JSX puro (expresiones con llaves, fragmentos, etiquetas de componentes con mayúscula inicial) se interpreta como HTML y puede presentar pequeños problemas estéticos. Para código específico de un framework recomendamos Prettier configurado para tu dialecto; para HTML sin procesar, archivos .htm y plantillas, nuestra herramienta es perfecta.

No se realiza ninguna subida. El formateador se ejecuta íntegramente en tu navegador con js-beautify, así que puedes pegar con seguridad plantillas de páginas internas, borradores de correos o HTML con datos privados sin que nada salga de tu dispositivo.

La minificación elimina los comentarios HTML, reduce cualquier secuencia de espacios entre etiquetas a un solo espacio y suprime los saltos de línea. El resultado es un HTML que se renderiza de forma idéntica y suele ser entre un 10 % y un 30 % más pequeño. Combinado con gzip en el servidor, reduce notablemente el peso inicial de la página en páginas con mucho contenido.

Sí: haz clic en Descargar para guardar el resultado embellecido como output.html o el resultado minificado como output.min.html. El archivo está codificado en UTF-8, así que funciona igual de bien con contenido en inglés, cirílico, CJK y de derecha a izquierda.

Es una pequeña utilidad que funciona solo en el navegador, sin coste de alojamiento, así que la ofrecemos gratis como parte de nuestro conjunto de herramientas para desarrolladores. Sin anuncios, sin rastreo del resultado y sin más límite de tamaño de archivo que el que tu navegador pueda mantener en memoria.

El modo Embellecer te permite elegir 2, 4 u 8 espacios de sangría. Elige el ancho que usa tu editor o tu estilo de código, y luego copia el resultado o descárgalo como output.html para que el formato pase directamente a tu proyecto.

El selector de sangría (2, 4 u 8 espacios) solo se aplica en el modo Embellecer, ya que Minificar elimina por diseño todos los espacios en blanco y saltos de línea: no queda nada que sangrar. Vuelve a Embellecer para ver de nuevo el efecto del ancho de sangría.

A medida que pegas o editas, la herramienta ejecuta automáticamente una comprobación estructural y enumera cualquier etiqueta sin cerrar, mal emparejada o de cierre suelta justo debajo del panel de salida, sin necesidad de un botón aparte. Un mensaje verde de «No se han encontrado problemas estructurales» confirma que el marcado está bien formado.

Usa el modo Embellecer con sangría de 2 espacios —es la convención más común y mantiene los diffs compactos— y luego revisa el panel de problemas estructurales para confirmar que no ha quedado una etiqueta sin cerrar. Una vez revisado, cambia al modo Minificar antes de pasar a producción para eliminar de nuevo los espacios en blanco adicionales.

Sí: arrastra un archivo .html, .htm o .xhtml al área de carga, o haz clic para explorar, y su contenido se carga directamente en el cuadro de entrada exactamente como si lo hubieras pegado. A partir de ahí, Embellecer, Minificar, el ancho de sangría y el verificador estructural funcionan igual, tanto si el marcado procede de un archivo como de un pegado.

Sí: en cuanto hay resultado, aparece un botón Copiar junto al panel de salida y al área de acción principal. Al hacer clic, copia al instante el resultado actual de Embellecer o Minificar a tu portapapeles (muestra brevemente «Copied!» como confirmación), para que lo pegues directamente en tu editor o en un comentario de revisión de código sin guardar un archivo .html intermedio.