Formateador HTML: embellezca y minimice HTML en línea gratis

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: el formateador 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 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 sube nada. El formateador funciona por completo en tu navegador, así que puedes pegar con seguridad plantillas internas, borradores de correo o HTML con datos privados sin que salgan 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.

No: HTML Prettify se ejecuta completamente en su navegador, por lo que lo que pega nunca sale de la máquina en la que se encuentra. Eso es importante si estás verificando algo que contiene un token, una clave o datos de un cliente. Cerrar la pestaña es suficiente para borrarla.

El error apunta a la primera posición que no se pudo analizar, que generalmente está justo después del error real en lugar de sobre él: una coma faltante, una comilla o corchete sin cerrar, o una cita tipográfica pegada de un documento en lugar de una simple. Primero verifique la línea sobre la posición informada.

HTML Prettify supports free standard use within the published processing allowances. Free downloads are clean — no watermark. No signup is required for standard tool use. Photo effects and AI edits have a web-size limit on Free, with the original-resolution result available through Premium or one credit. Crop, resize, rotate, compress and convert stay full size. Published processing allowances and file limits still apply.

No: HTML Prettify funciona en el navegador, tanto en el ordenador como en el móvil. No necesitas instalar nada, iniciar una prueba ni comprar una licencia antes de comprobar si resuelve lo que necesitas. Pruébalo con el archivo real con el que tienes problemas, no con una muestra.