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.
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, ancho y espaciado 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. El espaciado decide el compromiso alrededor de los elementos en línea: Exacto conserva el peso que tenía el espacio, Legible da a cada elemento su propia línea.
- 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 de hasta 2 MB desde el disco; luego copia el resultado ordenado o guárdalo con un nombre derivado del que abriste. 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, y usa el espaciado Exacto para mantener el renderizado idéntico o Legible para poner cada elemento en su propia línea.
- 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.
- El marcado que el parser no puede leer detiene la pasada y se informa con el motivo, la línea y la columna, y el fragmento donde se atascó, en lugar de producir una salida a medio formatear.
- El CSS o el JavaScript embebidos que el formateador no puede analizar se dejan tal como los escribiste mientras el resto del documento sí se reindenta, así que un script roto nunca te cuesta el resultado entero.
- 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, y Embellecedor de JavaScript hace lo mismo con archivos JavaScript. En sentido contrario, cuando el archivo ya está terminado y tiene que salir lo más pequeño posible, eso es Minificador de HTML.
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, un espacio entre dos elementos en línea puede afectar el renderizado. El espaciado Exacto respeta eso y reorganiza el documento sin cambiar su aspecto en el navegador, y por eso un corchete de cierre acaba a veces solo en su línea. El espaciado Legible cambia esa garantía por una forma más limpia.
-
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 en el marcado detiene el formato y se informa con su posición. El CSS o el JavaScript embebidos que no se pueden analizar no detienen nada: ese bloque simplemente se deja como estaba.
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. El espaciado alterna entre Exacto, que nunca cambia lo que renderiza la página, y Legible, que pone cada elemento en su propia línea y puede añadir un espacio entre dos elementos en línea que no lo tenían. 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.
¿Qué pasa si mi HTML tiene un error de sintaxis?
Recibes el motivo, la línea y la columna, y un fragmento del código alrededor, en lugar de un documento a medio formatear. El parser sigue las mismas reglas de HTML que sigue un navegador, así que una etiqueta sin cerrar que pueda cerrar por ti se cierra en silencio; lo que sí lo detiene es un marcado que no se puede reconciliar, como una etiqueta de cierre sin apertura o un atributo cuya comilla nunca se cierra.
¿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.