Desarrollador 🔒 Se ejecuta en tu navegador — no se envían datos

Formateador de HTML

Convierta una larga línea de HTML en un marcado bien sangrado que pueda leer y editar.

Entrada
Salida

Formatear HTML online

El HTML que sale de un editor de emails, de una exportación de un CMS, de un maquetador visual o de un sitio en producción minificado suele ser una única línea enorme. Encontrar un div concreto ahí es un suplicio. Esta página es el formateador de código configurado para HTML: pegue el marcado y cada elemento se coloca en su propia línea, sangrado según su nivel de anidamiento.

El formateo lo hace js-beautify, un formateador de código abierto muy extendido, dentro de la pestaña de su navegador. No se sube nada.

Qué hace el formateador

  • Los elementos de bloque, como div, section, ul y li, empiezan cada uno una línea nueva, sangrada bajo su elemento padre.
  • Los elementos en línea, como a, b, span y em, se quedan dentro de la línea de texto a la que pertenecen.
  • Los atributos se conservan exactamente como se escribieron, en el mismo orden.
  • Las líneas en blanco que añadió a propósito se mantienen, hasta dos seguidas.

Cuándo formatear y cuándo minificar

Formatee cuando una persona tenga que leer o editar el archivo. Minifique cuando un navegador tenga que descargarlo: quitar comentarios y sangrías suele ahorrar entre un 10 y un 20% de una página HTML antes de gzip. En la mayoría de los sitios la ganancia mayor está en la compresión del servidor, pero minificar sigue siendo útil para plantillas que se incrustan en emails o en otras páginas.

Herramientas relacionadas

Para la hoja de estilos que acompaña a la página, use el minificador de CSS; para los scripts, el embellecedor de JavaScript. Para comparar el marcado antes y después de una edición, use Comparar textos.