Formateador de HTML

Obtén HTML legible y con sangría coherente a partir de código minificado o en una línea.

Funciona en tu navegador
Sin subidas
Sin cuenta

Cargando tu herramienta del navegador…

Qué hace Formateador de HTML

Las plantillas minificadas, el HTML de correos y el código copiado de las herramientas para desarrolladores del navegador suelen llegar en una sola línea larga. Pégalo aquí y cada elemento de bloque pasa a su propia línea, sangrado bajo su elemento padre, para que veas la estructura, revises un diff o encuentres dónde falla la anidación.

Los elementos cortos, como un elemento de lista con un solo enlace, se quedan en una línea, y las etiquetas en línea dentro de un párrafo siguen en el flujo del texto. Elige “2 espacios”, “4 espacios” o “Tabulación” en “Sangría con” para que coincida con tu proyecto.

Ejemplo

Entrada

<nav><ul><li><a href="/">Inicio</a></li><li><a href="/docs/">Documentación</a></li></ul></nav><p>Hola <em>a todos</em></p>

Resultado

<nav>
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/docs/">Documentación</a></li>
  </ul>
</nav>
<p>Hola <em>a todos</em></p>

El nav y el ul reciben su propia línea, mientras que cada elemento de lista y el párrafo se quedan en una línea porque solo contienen contenido en línea.

Cómo usar Formateador de HTML

Pega HTML en el cuadro “HTML” o haz clic en “Abrir archivo”.
Elige “2 espacios”, “4 espacios” o “Tabulación” en “Sangría con”.
Haz clic en “Copiar” o en “Descargar .html”.

Conviene saber

Da formato pero no valida. Las etiquetas de cierre que faltan no se señalan; aparecen como una anidación inesperada en el resultado sangrado.
Las series de espacios y saltos de línea dentro del texto normal se reducen a espacios simples, como los muestra un navegador.
No hay opción para minificar. Para reducir el HTML en producción, usa el minificador de tu herramienta de compilación.
Para quitar también estilos, clases o etiquetas no seguras, usa el Limpiador de HTML.

Preguntas sobre Formateador de HTML

¿Cómo doy formato a HTML online?

Pega el HTML en el cuadro y la versión con formato aparece al momento. Elige la sangría y luego cópiala o descárgala como archivo .html.

¿Dar formato al HTML puede cambiar cómo se ve la página?

Rara vez. Los navegadores ignoran los espacios en blanco entre elementos de bloque. La excepción son los elementos inline o inline-block colocados uno al lado del otro, donde un salto de línea entre ellos puede añadir un pequeño hueco visible.

¿Sangro el HTML con 2 o con 4 espacios?

Dos espacios es la opción más habitual para HTML, porque el código se anida mucho y las líneas se alargan rápido. Cuatro espacios o tabulaciones están bien si tu proyecto ya los usa; la coherencia importa más que el número.

¿Puede dar formato a plantillas de correo HTML?

Sí. El código de correo, lleno de tablas, se sigue mucho mejor con cada tabla, fila y celda en su propia línea, y los estilos en línea de los que dependen los clientes de correo se conservan tal cual.