HTML Beautifier

El Embellecedor de HTML reformatea marcado minificado, comprimido o con mala indentación en HTML limpio y legible — indentación correcta basada en el anidamiento de etiquetas, un elemento por línea, y limpieza opcional de comentarios/líneas en blanco — para que realmente puedas leer y depurar la estructura del DOM. Pega HTML minificado, una exportación de un CMS, o marcado desordenado de cualquier fuente, y obtén una salida formateada al instante.

• •Indentación: 2 espacios, 4 espacios o tabulaciones, reaplicados automáticamente según la profundidad de anidamiento de etiquetas
• •Reformateo automático de etiquetas: cada elemento se coloca en su propia línea e se indenta para reflejar la estructura padre-hijo
• •Reconocimiento de elementos vacíos/autocontenidos: etiquetas como <img>, <br>, <input> y <meta> se reconocen y nunca reciben un nivel de indentación incorrecto
• •Eliminación de comentarios (opcional): elimina los comentarios <!-- --> al reformatear, o consérvalos
• •Eliminación de líneas en blanco (opcional): colapsa las líneas en blanco sobrantes de motores de plantillas o marcado generado
• •Validación estructural en tiempo real: marca etiquetas sin cerrar, etiquetas de cierre no coincidentes y etiquetas de cierre inesperadas con números de línea

• •Depurar una página de producción minificada o marcado exportado de un CMS reformateándolo para ver la estructura real del DOM
• •Revisar el HTML generado por un motor de plantillas (Handlebars, EJS, Pug) o un framework renderizado en el servidor antes de hacer commit
• •Hacer legible el HTML de una sola línea u ofuscado proveniente de una página extraída o una plantilla de correo
• •Estandarizar la indentación en toda una base de código o antes de una revisión de código
• •Rastrear un error de diseño viendo exactamente cómo están anidados los elementos entre sí

1. 1.Pega tu HTML en el editor de entrada, o sube un archivo .html/.htm
2. 2.Elige el estilo de indentación (2 espacios, 4 espacios o tabulación)
3. 3.Activa la eliminación de comentarios y de líneas en blanco según necesites
4. 4.La salida formateada con el anidamiento correcto aparece automáticamente mientras escribes
5. 5.Copia la salida o descárgala como archivo .html

• •Los elementos vacíos (br, hr, img, input, meta, link, area, base, col, embed, param, source, track, wbr) quedan excluidos de los aumentos de indentación, por lo que no anidarán incorrectamente las etiquetas que los siguen
• •El contenido dentro de los bloques <script> y <style> se reformatea como texto plano junto con el marcado circundante, en lugar de volver a analizarse como JS/CSS — un contenido de script en línea inusual que contenga cadenas similares a etiquetas puede afectar ocasionalmente el paso de división de líneas
• •El validador es un verificador ligero de pila de etiquetas, no un analizador HTML5 completo — detecta etiquetas sin cerrar, no coincidentes e inesperadas, pero no todos los errores de marcado a nivel de especificación

• •Esta es una herramienta de formateo, no un linter de HTML ni un verificador de accesibilidad — no detectará atributos alt faltantes, uso inválido de ARIA, u otros problemas semánticos
• •Los archivos HTML extremadamente grandes (exportaciones de varios MB) pueden ser lentos de reformatear por completo en el navegador
• •Para aplicar un estilo HTML consistente en todo un equipo o repositorio, un formateador dedicado integrado en tu editor/CI (p. ej. Prettier) es más apropiado que el formateo ad hoc en el navegador

Si tienes HTML legible y necesitas reducirlo para producción — disminuyendo el peso de la página y mejorando el tiempo de carga — usa en su lugar el Minificador de HTML. Elimina comentarios y espacios en blanco, minifica el CSS/JS en línea, y te muestra la reducción exacta de tamaño.