Formateador de HTML

Formatea y embellece HTML, incluidas las listas de clases Tailwind.

Sobre esta herramienta

Formatea y embellece HTML: cada nivel anidado recibe su sangría, los elementos cortos se quedan en una línea y los bloques <pre>, <script> y <style> no se tocan. No corrige marcado inválido: para eso siguen siendo necesarios los validadores.

Cómo usar

Pega el marcado comprimido, pulsa Formatear y comprueba que las etiquetas siguen equilibradas. Después copia el resultado y continúa trabajando en tu editor habitual.

Ejemplo

El ejemplo es un bloque hero escrito en una sola línea.

Entrada

<section class="hero"><h1>CSS to Tailwind</h1><p>Convert utilities in the browser.</p><a href="/">Open</a></section>

Salida

<section class="hero">
  <h1>CSS to Tailwind</h1>
  <p>Convert utilities in the browser.</p>
  <a href="/">Open</a>
</section>

Consejo

Si la sangría se desplaza donde no esperabas, casi siempre falta una etiqueta de cierre en el original.

Conviene saber

¿Un embellecedor de HTML es distinto de un formateador de HTML?

No. Ambos reindentan el marcado anidado, así que esta página cubre las dos búsquedas con una sola herramienta.

¿Qué deja intacto y corrige HTML inválido?

El contenido de <pre>, <textarea>, <script> y <style> se conserva tal cual. La herramienta solo reindenta: las etiquetas sin cerrar o mal anidadas siguen igual, así que usa un validador cuando la estructura importe.

Extensión de Chrome