Formateador HTML

Ordena HTML desordenado con una sangría legible, o minifícalo a una sola línea, por completo en tu navegador.

Cómo se usa

  1. Pega o escribe HTML. Se formatea (o minifica) mientras escribes, sin botones que pulsar.
  2. Cambia entre Formatear y Minificar y elige 2 o 4 espacios. El control de sangría se desactiva en el modo Minificar.
  3. Los elementos de bloque se sangran un nivel por profundidad, uno por línea. El contenido en línea (texto mezclado con <a> o <b>) se conserva exactamente como se escribió.
  4. Los elementos vacíos (<br>, <img>, <input>…) no necesitan etiqueta de cierre y se conservan tal cual, incluido un /> opcional.
  5. Los elementos de texto sin procesar (<script>, <style>, <textarea>, <title>, <pre>) se copian carácter a carácter; nada de su interior se analiza ni se reformatea.

Ejemplo

Entrada

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Demo</title></head><body><div class="card"><h1>Hola</h1><p>Hola <b>a todos</b></p><ul><li>uno</li><li>dos</li></ul></div><script>const x=1;</script></body></html>

Salida

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
  </head>
  <body>
    <div class="card">
      <h1>Hola</h1>
      <p>Hola <b>a todos</b></p>
      <ul>
        <li>uno</li>
        <li>dos</li>
      </ul>
    </div>
    <script>const x=1;</script>
  </body>
</html>

El contenido en línea y el interior de <script>/<style> se conservan tal cual; <meta> es un elemento vacío y se mantiene como se escribió.

Limitaciones

  • Solo estructura: emparejamiento de etiquetas, elementos vacíos, cierres implícitos habituales (li/td/tr/dt/dd/option/p/head) y anidamiento. Sin validación DTD/esquema.
  • El JavaScript y el CSS incrustados no se formatean: el contenido de <script>/<style> se mantiene tal cual. (Para eso, usa el formateador de código).
  • No se infieren todas las etiquetas de cierre opcionales de HTML5; el anidamiento realmente mal formado se notifica con línea y columna.
  • El contenido en línea o mixto no se resangra a propósito. El contenido de <pre>/<textarea>/<title> se conserva tal cual.
  • Sin subida de archivos, sin parámetros en la URL, sin historial y sin cuenta. La entrada nunca sale de tu navegador.

Otros formateadores y herramientas de texto de esta caja.