Cómo usarla
- Pega HTML en el cuadro de entrada, abre un archivo .html o prueba el ejemplo.
- Elige Embellecer para obtener un marcado indentado y legible, o Minificar para una salida compacta.
- Al embellecer, elige 2 espacios, 4 espacios o tabulaciones, y decide si se conservan los comentarios.
- Copia el resultado o descárgalo como archivo .html.
Cómo funciona
El formateador lee el HTML con un tokenizador tolerante, de forma similar a como lo hace un navegador, y lo escribe de nuevo. Nunca renderiza la entrada, por lo que los scripts del código pegado no pueden ejecutarse y no se carga nada de la web.
Beautify coloca cada elemento de bloque (div, p, ul, li, section, table, …) en su propia línea, indentados según su nivel de anidamiento. El texto y los elementos en línea como a, b, em, span, code, img y br permanecen juntos en una línea, de modo que los espacios entre palabras y enlaces no se modifican de una manera que altere la página renderizada. Las secuencias de espacios y saltos de línea en el texto se convierten en un solo espacio, que es como los navegadores las muestran de todos modos.
El contenido de los elementos pre, textarea, script y style se copia exactamente como está escrito, incluyendo sus espacios en blanco y cualquier carácter < o >. Los elementos vacíos como br, img, input, meta y link nunca reciben una etiqueta de cierre. Las etiquetas de cierre automático como <path /> en SVG en línea se mantienen autocerradas.
Minify reduce los espacios en blanco del texto a espacios simples, elimina los espacios en blanco junto a los elementos de bloque, normaliza los espacios entre atributos y, si la opción «Mantener comentarios» está desactivada, elimina los comentarios. Los comentarios condicionales se conservan siempre.
La herramienta no corrige HTML no válido, no añade etiquetas faltantes, no reordena atributos ni minimiza el CSS y JavaScript dentro de los elementos style y script. Los elementos que quedan abiertos se cierran al final de su elemento padre y una etiqueta de cierre sin su etiqueta de apertura correspondiente se mantiene tal como está escrita.
Ejemplos
Leer marcado generado
Un CMS genera una plantilla como una sola línea larga. Beautify con 2 espacios muestra la navegación, los elementos de lista y el contenido principal como un árbol indentado, mientras que «Los precios incluyen <strong>IVA</strong>» se mantiene en una sola línea legible.
Preparar una plantilla de correo electrónico
Minifica un correo HTML con los comentarios desactivados para reducir su tamaño. Un bloque <pre> con una tabla de precios y el <style> en línea se dejan exactamente como estaban.
Comprobar la estructura
Cuando falta una etiqueta de cierre </div>, la salida de Beautify muestra los siguientes elementos indentados un nivel más de lo debido, lo que facilita ver dónde debería haber terminado el elemento.
Preguntas frecuentes
¿Embellecer el código cambiará el aspecto de mi página?
En casi todos los casos, no. Los espacios en blanco dentro de los elementos de bloque se colapsan y se convierten en saltos de línea que los navegadores ignoran. El texto y los elementos en línea permanecen en la misma línea, y pre, textarea, script y style no se modifican. La excepción son las páginas que dependen de la propiedad CSS white-space: pre en elementos normales.
¿Minifica el CSS y el JavaScript que hay dentro de la página?
No. El contenido de script y style se mantiene exactamente como está escrito, por lo que no puede romperse. Usa el formateador de CSS para minificar una hoja de estilos por separado.
¿Es seguro pegar HTML de una fuente desconocida?
Sí. La entrada se trata únicamente como texto y nunca se inserta en la página, por lo que sus scripts no se ejecutan y sus imágenes o enlaces no se cargan.
¿Valida mi HTML?
No. Es deliberadamente permisivo y formatea el marcado con errores en lugar de rechazarlo. Las etiquetas de cierre que no coinciden se mantienen, por lo que la indentación te ayuda a detectarlas, pero no se genera una lista de errores.
Privacidad
Tu HTML se procesa solo en tu navegador y nunca se renderiza ni se sube. No se almacena nada ni se incluye en analíticas.