Desminificar HTML en línea
Convierte el código fuente comprimido de una página en marcado legible. Las etiquetas se sangran según su nivel de anidación, los atributos se presentan de forma ordenada y los scripts y estilos incrustados se formatean junto con el documento.
Por qué el código fuente tiene ese aspecto
Los minificadores HTML reducen los espacios entre etiquetas, eliminan comentarios, omiten etiquetas de cierre opcionales y quitan las comillas de los atributos que no las necesitan. Las plantillas del servidor añaden complejidad, porque una página construida a partir de decenas de fragmentos llega como un único flujo sin relación visible con los archivos que la generaron. Abre el código fuente de casi cualquier sitio en producción y encontrarás un documento con unas pocas líneas enormes, donde localizar el cierre de una sección obliga a contar etiquetas a simple vista.
Lo esencial es la estructura
HTML es un árbol, y cuesta leer un árbol representado en una sola línea. La sangría según el nivel de anidación revela enseguida la forma del documento: dónde termina la cabecera, qué contenedor envuelve el contenido principal, a qué profundidad está un componente y dónde investigar una relación de anidación inesperada. Por eso, el código fuente formateado resulta útil para comprobar el orden de los encabezados, inspeccionar el marcado generado por un framework o entender cómo otro sitio organiza una sección. Elige el origen que corresponda a tu pregunta. El código fuente guardado muestra el marcado entregado por el servidor, mientras que el copiado del panel Elementos puede incluir cambios realizados por scripts del cliente. El formato no concilia ambas vistas ni reproduce el DOM en ejecución. Al investigar un elemento inesperado, compara el código fuente con el documento activo e inspecciona el script que lo añadió. Del mismo modo, una estructura de encabezados bien sangrada ayuda en una revisión manual, pero no constituye una auditoría de accesibilidad de toda la página.
Los scripts y estilos incrustados también
Una página real casi nunca es solo marcado. Fragmentos de analítica, datos estructurados JSON-LD, objetos de configuración y CSS crítico están incrustados directamente en el documento, y un minificador comprime también todo eso. El formateador trata cada bloque incrustado con el analizador adecuado: una etiqueta script que contiene JavaScript minificado sale como JavaScript legible y una etiqueta style sale como CSS legible, todo ello dentro de un documento correctamente sangrado.
Revisa el contenido sensible a los espacios
Los espacios pueden afectar a la representación de HTML, especialmente alrededor del texto en línea y dentro de elementos como pre y textarea. El formateador emplea reglas que tienen en cuenta el comportamiento habitual de los espacios en HTML, pero formatear no es una prueba de regresión visual. Conserva la página original y comprueba el resultado en su contexto real antes de publicar cambios. La presentación también depende de hojas de estilos, scripts y comportamientos del navegador que aquí no se evalúan. Para investigar, una copia formateada facilita leer el documento sin asumir que garantiza una representación visual idéntica.
Preguntas frecuentes
¿Puedo pegar el código fuente de una página completa?
Sí. Copia el código fuente desde tu navegador con view-source, o guarda la página y abre el archivo, y se formateará el documento completo, incluidos el head, el body, los scripts incrustados y los datos estructurados.
¿Cambiará el formato la apariencia de la página?
El formateador intenta respetar los espacios significativos de HTML, pero conviene comparar el resultado antes de publicarlo. El texto en línea, el contenido preformateado y las interacciones con los estilos pueden hacer que los espacios importen. Conserva una copia original y comprueba la representación en el proyecto donde se utiliza el marcado.
¿Funciona con plantillas como Twig o Blade?
El editor está pensado para HTML entregado al navegador. Twig, Blade y otros lenguajes de plantillas introducen sintaxis que el formateador HTML puede rechazar o tratar de forma inesperada. Para obtener una vista fiable del marcado generado, procesa la plantilla en tu proyecto y formatea el documento HTML resultante.