Embellecer y minificar HTML - Formatea 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: 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.

The indent selector (2, 4 or 8 spaces) only applies in Prettify mode, since Minify strips all whitespace and line breaks by design — there is nothing left to indent. Switch back to Prettify to see the indent width take effect again.

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.

Use Prettify mode with 2-space indent — it's the most common convention and keeps diffs compact — then check the structural-issues panel to confirm they haven't left an unclosed tag. Once reviewed, switch to Minify mode before shipping to production to strip the extra whitespace back out.

Yes — drag an .html, .htm or .xhtml file onto the upload area, or click it to browse, and its contents load straight into the input box exactly as if you'd pasted them. From there, Prettify, Minify, indent width and the structural checker all work identically whether the markup came from a file or a paste.

Yes — once there's output, a Copy button appears next to the output panel and the primary action area. Clicking it copies the current Prettify or Minify result to your clipboard instantly (it briefly shows 'Copied!' for confirmation), so you can paste directly into your editor or a code review comment without saving an intermediate .html file.