Embellecedor de HTML
El HTML minificado o generado por una herramienta suele llegar como una sola línea: etiquetas, atributos y texto quedan pegados, sin saltos de línea. Este formateador lo vuelve a indentar como un árbol claro, con cada elemento en su propia línea y una jerarquía fácil de seguir. Como las páginas reales suelen incluir estilos y scripts, también formatea en la misma pasada el CSS dentro de <style> y el JavaScript dentro de <script>, para que todo el archivo quede ordenado. Primero analiza el marcado como un árbol de sintaxis y luego lo imprime de nuevo, así que el resultado renderizado no cambia; solo cambia la presentación. Puedes elegir la indentación y el ancho de línea, y todo se ejecuta en el navegador.
- Vuelve a indentar HTML minificado o de una sola línea como un árbol legible, con cada elemento en su línea y una jerarquía fiel a la estructura
- No solo ordena el marcado: también formatea el CSS dentro de <style> y el JavaScript dentro de <script> en la misma pasada
- Reformatea desde un árbol de sintaxis real, de modo que etiquetas, atributos y renderizado se mantienen intactos
- Se ejecuta por completo en el navegador, así que páginas internas, trabajos de clientes o contenido sin publicar no salen de tu equipo
Resumen
Leer una página que no escribiste, o una que un paso de compilación dejó plana, empieza por devolver el marcado a una forma que la vista pueda seguir. Esta herramienta hace eso sin intentar adivinar qué significa la página.
- 01
Indentación basada en un analizador
Antes de volver a imprimirlo, el HTML se lee como un árbol de sintaxis. La herramienta entiende elementos, atributos y niveles, en lugar de adivinar dónde cortar líneas. Un formato que viene del árbol no mueve contenido en silencio fuera del elemento al que pertenece.
- 02
CSS y JS embebidos también se formatean
Una página real rara vez es solo marcado. El CSS dentro de cada bloque <style> y el JavaScript dentro de cada bloque <script> se reordenan en la misma pasada, sin copiar nada a herramientas separadas.
- 03
Indentación y ancho a tu medida
Elige dos espacios, cuatro espacios o tabulador, y fija el ancho de línea en 80, 100 o 120 para que las etiquetas largas con muchos atributos se partan donde tu equipo lo espera.
- 04
Estructura fácil de escanear
Cada elemento queda en su propia línea y los hijos se indentan bajo su padre, así que el contorno del documento se ve de un vistazo. También puedes contraer o expandir todos los bloques a la vez para concentrarte en una sección.
- 05
Conteo de líneas y bytes
El panel de salida muestra cuántas líneas ocupa el documento formateado y cuál es su tamaño, para que veas de inmediato qué tan compacto era el original.
- 06
Copiar, descargar o subir
Pega desde el portapapeles o abre un archivo .html desde el disco; luego copia el resultado ordenado o guárdalo. Todo el flujo se queda en tu equipo y no toca el servidor.
Cómo usarla
Convierte un bloque de HTML ilegible en un documento limpio y con indentación consistente en pocos pasos.
- 01
Pega el HTML minificado o desordenado en el panel de entrada, o usa “Subir” para abrir un archivo .html desde el disco.
- 02
Elige el estilo de indentación y el ancho de línea que encajen con las convenciones del proyecto.
- 03
Lee el marcado formateado a la derecha: cada elemento queda en su línea, el CSS y el JS embebidos también se ordenan, y el resultado se actualiza al cambiar las opciones.
- 04
Copia el resultado o descárgalo como archivo .html, y llévalo a tu editor para leerlo, revisarlo o seguir trabajando.
Detalles
Detalles que hacen que el resultado formateado sea confiable y cómodo de usar.
- Se basa en Prettier, que reformatea desde una representación analizada en lugar de adivinar dónde insertar saltos de línea.
- El CSS y JavaScript embebidos se reformatean con el mismo motor, así que una página completa queda consistente de principio a fin.
- El formato se actualiza mientras escribes y al cambiar opciones, sin tener que pulsar un botón antes de ver el resultado.
- Los errores de sintaxis se muestran en su sitio junto con el mensaje, en lugar de producir una salida vacía o a medio formatear.
- No se sube ni se registra nada. El HTML pegado permanece en el navegador y desaparece al cerrar la pestaña.
Casos de uso
Convertir marcado denso en una forma legible ayuda especialmente en estos casos.
-
Leer una página minificada
Cuando la única copia de una página es el HTML minificado de producción o de view-source, formatearlo aquí permite ver cómo están organizados realmente los elementos y secciones.
-
Revisar marcado generado
La salida de un motor de plantillas, un CMS o un constructor de correos suele venir plana. Solo después de formatearla tiene sentido revisarla o auditarla.
-
Depurar problemas de layout o anidación
El HTML indentado facilita detectar una etiqueta sin cerrar, un elemento fuera de lugar o el contenedor que rompe el diseño sin hacerse notar.
-
Producir un diff limpio
Formatea dos versiones de una página de la misma manera y la herramienta de diff mostrará el cambio real, no una masa de ruido por espacios.
-
Ordenar fragmentos con código embebido
Un fragmento copiado de documentación suele traer <style> y <script> en línea. Una sola pasada ordena el marcado y el código embebido juntos.
-
Enseñar y compartir ejemplos
Una página con indentación consistente es más fácil de explicar en tutoriales, comentarios de código o solicitudes de revisión que una con espacios improvisados.
Ver también
¿Trabajas con un solo lenguaje?Embellecedor de CSS formatea hojas de estilo por separado, yEmbellecedor de JavaScript hace lo mismo con archivos JavaScript.
Formatear y minificar
Formatear y minificar son la misma idea en direcciones opuestas: ambas operaciones solo tocan los caracteres que el navegador ignora entre etiquetas, nunca el significado. Una añade el espacio que vuelve legible el marcado; la otra lo elimina.
-
El formato es reversible y seguro
Añadir indentación y saltos de línea entre elementos no cambia cómo se renderiza la página. Un navegador trata una línea y cuarenta líneas como el mismo documento, así que formatear es un cambio de presentación para personas, no una reescritura de la página.
-
Por qué el HTML minificado cuesta leer
Un paso de compilación elimina los espacios opcionales entre etiquetas para ahorrar bytes. Es ideal para publicar, pero deja una sola línea en la que elementos, atributos y texto se mezclan sin límites visibles.
-
El código embebido forma parte del documento
Los estilos y scripts viven dentro del HTML, por eso un formateador que solo tocara etiquetas dejaría medio archivo ilegible. Tratar <style> como CSS y <script> como JavaScript es lo que ordena una página real de principio a fin.
-
No es desminificación completa
El formateo recupera la presentación, no el origen. Los comentarios eliminados por la minificación no vuelven, y el marcado que la compilación dejó en línea sigue en línea. Obtienes HTML legible, no una copia byte a byte de lo que escribió el autor.
-
Los espacios pueden importar
A diferencia de la mayoría del código, los espacios entre elementos en línea pueden afectar el renderizado. El formateador respeta eso, así que reorganiza el documento sin cambiar su aspecto en el navegador.
-
Una herramienta para leer y revisar
El objetivo es comprender: hacer que una página plana o desconocida sea fácil de escanear, comparar y razonar. Para publicar, todavía minificas; ese es el espejo de este paso.
Buenas prácticas
Hábitos para sacarle más partido al formateo de HTML.
- Usa el formateador para leer y revisar, pero conserva el código fuente legible original como referencia cuando exista.
- Fija un estilo y ancho de indentación para cada proyecto y mantenlo, para que los archivos formateados generen diffs limpios.
- Recuerda que formatear no recupera comentarios ni deshace marcado que la compilación dejó en línea; recupera la presentación, no el origen.
- En tu propio código, integra un formateador en el editor o en un hook de pre-commit para mantener los archivos consistentes sin pegar manualmente cada vez.
- Formatea la salida de la plantilla, es decir, el HTML que recibe el navegador, no el lenguaje de plantillas en sí, porque usa sintaxis que este analizador no espera.
Limitaciones
Qué hace esta herramienta y qué deja para otros pasos.
- Reindenta un único documento HTML y el CSS y JS embebidos en él. No descarga hojas de estilo, scripts ni imágenes enlazadas.
- Recupera la presentación, no la información perdida. Los comentarios y estructuras eliminados por la minificación no vuelven.
- Lenguajes de plantillas como Handlebars, Jinja o ERB no son HTML por sí solos; formatea la salida renderizada en lugar del código de la plantilla.
- Un error de sintaxis detiene el formato y se informa, así que una entrada muy dañada no producirá una salida parcial en silencio.
Preguntas frecuentes
Preguntas frecuentes sobre formatear HTML y cuándo usarlo.
¿Formatear cambia cómo se renderiza mi página?
No. Solo añade los espacios y saltos de línea que el navegador ignora entre etiquetas: indentación, saltos entre elementos y anidación consistente. Etiquetas, atributos y contenido no cambian, y los espacios que afectarían el layout en línea se conservan, así que la página renderizada se ve igual antes y después.
¿También formatea el CSS y JavaScript dentro del HTML?
Sí. El CSS dentro de cada bloque <style> y el JavaScript dentro de cada bloque <script> se reformatean junto con el marcado, usando el mismo motor que los formateadores dedicados de CSS y JS. No tienes que separarlos en otras herramientas.
¿Puede revertir por completo una minificación?
Revierte la presentación, no la información. El formateo recupera indentación legible, pero los comentarios eliminados por el minificador no vuelven y el marcado que quedó en línea sigue en línea. Obtienes HTML limpio y legible, no una copia byte a byte del origen.
¿Qué opciones de indentación hay?
Puedes indentar con dos espacios, cuatro espacios o tabulador, y elegir un ancho de línea de 80, 100 o 120 para partir etiquetas largas con muchos atributos donde esperas. También puedes contraer, expandir o activar el ajuste de línea mientras lees.
¿Puedo formatear archivos de plantillas como Handlebars o Jinja?
No directamente. Esta herramienta formatea HTML estándar, que es lo que recibe un navegador. Sintaxis de plantilla como {{ }} o {% %} no es HTML válido por sí sola; formatea la salida renderizada o usa una herramienta que entienda tu lenguaje de plantillas.
¿Mi HTML se sube a algún sitio?
No. Todo se ejecuta en tu navegador. El HTML que pegas y cualquier archivo que abres se procesan localmente, nunca se transmiten ni se almacenan, y desaparecen al cerrar la pestaña, así que páginas internas y trabajo sin publicar permanecen privados.
Herramientas relacionadas
Sigue explorando el resto del conjunto de herramientas de datos y formato.