Embellecedor y formateador HTML en línea

¿Qué hace esta herramienta?

El embellecedor organiza el HTML en líneas con sangría para que sea más legible. Por ejemplo, si pegas <div><p>Hola</p></div> y eliges embellecer, el resultado será:

<div>
    <p>Hola</p>
</div>

La minificación elimina comentarios y espacios entre etiquetas, pero conserva los espacios dentro del texto. Por ejemplo, <div> <p>Hola mundo</p> </div> se convierte en <div><p>Hola mundo</p></div>.

Parámetros y limitaciones

Puedes elegir entre dos espacios, cuatro espacios o tabulación para la sangría. La herramienta usa heurísticas basadas en patrones de etiquetas, no un analizador HTML completo. Trata correctamente etiquetas vacías comunes como br, hr, img, input, link y meta, pero puede fallar con script, style, template, texto preformateado, elementos vacíos poco comunes o marcado malformado.

Privacidad y seguridad

Todo se procesa localmente en tu navegador; no se envía información a ningún servidor. Sin embargo, la herramienta no sanitiza el HTML, no muestra una vista previa, no valida accesibilidad ni repara el marcado. No ejecuta scripts y no garantiza una minificación segura para producción. Inspecciona y prueba el resultado antes de usarlo.

Preguntas frecuentes

¿Por qué mi código con pre o script no se sangra correctamente?

La herramienta no es un analizador HTML completo; usa heurísticas. Las etiquetas como pre, script o style pueden contener texto que no debe modificarse, y el formateador podría alterar la sangría de forma inesperada. Revisa siempre el resultado.

¿Qué hace exactamente la minificación con los espacios?

Elimina los espacios en blanco que aparecen entre el cierre de una etiqueta y la apertura de la siguiente, así como los comentarios. Los espacios dentro del texto (por ejemplo, entre palabras) se conservan.

¿Puedo usar esta herramienta para minificar HTML de producción?

No se recomienda sin pruebas. La minificación no es segura para producción porque no maneja todos los casos de marcado. Úsala para formatear y luego verifica el resultado manualmente.

Lista de verificación

• Pega el HTML completo.
• Selecciona el tipo de sangría deseado.
• Elige embellecer o minificar.
• Copia el resultado.
• Prueba el resultado en tu contexto real.