¿Para qué sirve formatear HTML?
Un HTML minificado, exportado por un editor visual o copiado de las herramientas del navegador suele llegar en una sola línea o con una sangría caótica. Así es casi imposible ver qué etiqueta cierra qué, dónde empieza un bloque o por qué algo se ve mal. Formatearlo coloca cada elemento en su línea, con una sangría que refleja la estructura del documento.
Esta herramienta usa Prettier, el formateador de código más usado en desarrollo web. Puedes elegir la sangría (2 espacios, 4 espacios o tabuladores) y el ancho máximo de línea (80, 100 o 120 caracteres): cuando una etiqueta con muchos atributos no cabe, Prettier los reparte en varias líneas. También formatea el CSS de las etiquetas style y el JavaScript de las etiquetas script, de modo que el documento queda ordenado de arriba abajo, con una sangría coherente en todos los niveles.
Formatear solo cambia espacios y saltos de línea: el contenido, las etiquetas y los atributos son los mismos. Prettier respeta los espacios que sí afectan a la presentación, como los de los elementos en línea o el contenido de pre. Si el HTML tiene un error que impide analizarlo, verás el mensaje del analizador, lo que de paso ayuda a localizar etiquetas mal cerradas que el navegador corrige en silencio.
El código se procesa en tu navegador, sin subirlo a ningún servidor. Tienes una prueba gratis con un archivo o un texto pegado; con ToolStudio Pro el uso es ilimitado y puedes formatear varios archivos a la vez y descargarlos en un ZIP.
¿Cómo formatear HTML?
- Pega tu HTML o arrastra un archivo .html o .htm.
- Elige la sangría: 2 espacios, 4 espacios o tabuladores.
- Elige el ancho de línea: 80, 100 o 120 caracteres.
- Pulsa el botón para formatear.
- Copia el código formateado o descárgalo.
Usos habituales
- Leer y depurar HTML minificado de una web en producción.
- Ordenar el código que exporta un editor visual o un constructor de páginas.
- Revisar plantillas de email HTML antes de editarlas.
- Unificar el estilo de código de un proyecto antes de compartirlo.
- Preparar ejemplos de código para documentación o clases.
¿Qué ancho de línea elegir?
80 caracteres es el valor por defecto de Prettier y funciona bien en pantallas pequeñas y en revisiones de código lado a lado. 100 o 120 reducen el número de líneas partidas en HTML con muchos atributos, como el que usa clases de Tailwind. Lo importante es que todo el equipo use el mismo valor.
Preguntas Frecuentes
¿Formatear cambia cómo se ve la página?
No. Solo se reorganizan espacios y saltos de línea; Prettier mantiene los espacios que afectan a la presentación.
¿Formatea también el CSS y el JavaScript del HTML?
Sí. El contenido de las etiquetas style y script se formatea con las mismas opciones de sangría y ancho.
¿Puedo hacer lo contrario y comprimir el HTML?
Sí, con el minificador de HTML, que elimina espacios y comentarios para reducir el tamaño.
¿Mi código se sube a algún servidor?
No. Prettier se ejecuta en tu navegador.
¿Es gratis?
Tienes una prueba gratis por herramienta: un archivo o un texto pegado. Después puedes volver a procesar ese mismo texto con otras opciones tantas veces como quieras, pero para procesar código nuevo necesitas ToolStudio Pro, que te da uso ilimitado de todas las herramientas, varios archivos a la vez descargados juntos en un ZIP y ninguna publicidad. Puedes cancelarlo cuando quieras.