pulsa ⌘K para cambiar de herramienta
FORMAT & CONVERT

Formateador HTML

Formatea código HTML con indentación adecuada.

local
html-format
§01 ACERCA DE ESTA HERRAMIENTA

Descripción general

Esta herramienta embellece HTML con js-beautify, el mismo motor que hay detrás de muchas extensiones de editor. Los elementos anidados se indentan dos espacios por nivel, las etiquetas se colocan en líneas sensatas y se conservan las líneas en blanco que ya tenías. No ajusta las líneas largas, así que las etiquetas con muchos atributos quedan intactas. Resulta útil para leer el código fuente minificado de una página, ordenar la salida de un CMS o de una plantilla de correo, y normalizar el marcado antes de un diff de revisión de código.

Cómo se usa

  1. Pega tu marcado en el campo HTML: una entrada minificada o en una sola línea sirve perfectamente.
  2. El resultado embellecido aparece al instante en el campo Formatted, a medida que escribes.
  3. Copia la salida desde el campo de solo lectura.

Ejemplos

  • <div><p>hello</p><span>world</span></div>

    <div>
      <p>hello</p>
      <span>world</span>
    </div>
    

Notas

Es un formateador, no un validador: las etiquetas sin cerrar o mal anidadas se indentan lo mejor posible y sin avisos. Los bloques <script> y <style> incrustados se indentan junto con el documento. Con HTML sensible a los espacios (maquetaciones con inline-block, contenido de <pre>), comprueba el resultado visual después de formatear.

FAQ
¿Se envía mi HTML a un servidor?
No. El formateo se ejecuta por completo en tu navegador mediante la biblioteca js-beautify. El marcado que contenga datos de clientes, identificadores de seguimiento o páginas sin publicar nunca sale de tu equipo.
¿El formateo cambia cómo se representa la página?
Casi nunca, aunque no nunca del todo. Los navegadores compactan la mayor parte de los espacios en HTML, así que reindentar es seguro con marcado habitual. Los contextos sensibles a los espacios — elementos en línea separados por un espacio, contenido de pre o de textarea — pueden verse afectados por cualquier reformateador; compara la salida en esas páginas.
¿Qué ajustes de formateo se aplican?
Valores fijos: indentación de dos espacios, sin ajuste forzado de línea (las líneas largas siguen siendo largas) y conservación de las líneas en blanco que ya hubiera entre bloques.