Saltar al contenido
es
Todas las herramientas

Categorías

Herramientas para desarrolladoresCodificación y decodificaciónJSON y datosHash y checksumHerramientas de textoFecha y horaHerramientas de redHerramientas de archivosMarkdown y diagramas

Formateador HTML

Pegue HTML minificado o desordenado y obtenga un marcado limpio, con sangría coherente, fácil de leer y comparar.

Procesado localmente en tu navegador

Opciones
0 caracteres · 0 líneas
El resultado aparecerá aquí.

¿Qué es Formateador HTML?

El HTML generado por herramientas de compilación, editores de CMS o "ver código fuente" suele ocupar una sola línea larga o tener una sangría irregular. Un formateador recoloca el marcado con un nivel de sangría por cada nivel de anidación, y así se aprecia la estructura del documento.

Esta herramienta usa el embellecedor HTML js-beautify. Puede elegir 2, 4 u 8 espacios o tabulaciones, un ancho de ajuste de línea, un atributo por línea, sangrar head y body, y conservar o no las líneas vacías. Los elementos en línea como <a> y <strong> siguen en línea, así que el flujo del texto no cambia.

¿Cómo funciona?

  1. Pegue su HTML en el cuadro de entrada; el resultado formateado aparece mientras escribe.
  2. Seleccione la sangría (espacios o tabulaciones) y el ancho de ajuste, donde 0 desactiva el ajuste.
  3. Active un atributo por línea si sus etiquetas llevan muchos atributos y elija si conservar las líneas vacías.
  4. Copie o descargue el HTML formateado.

Casos de uso habituales

  • Leer una página minificada o una plantilla de correo para encontrar una etiqueta de cierre que falta.
  • Normalizar la sangría antes de subir HTML al control de versiones.
  • Hacer que la salida de un componente sea cómoda de comparar entre dos versiones.
  • Preparar un fragmento para documentación o un informe de errores.

Ejemplos

Prueba esta entrada en la herramienta de arriba:

Entrada
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Demo</title></head><body><nav class="menu"><ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul></nav><main><h1>Hello</h1><p>This is a <strong>sample</strong> page with <em>inline</em> text.</p></main></body></html>
Salida
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Demo</title>
  </head>

  <body>
    <nav class="menu">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
    <main>
      <h1>Hello</h1>
      <p>This is a <strong>sample</strong> page with <em>inline</em> text.</p>
    </main>
  </body>

</html>

Privacidad

Formateador HTML se ejecuta por completo en tu navegador. El texto o los archivos que proporcionas se procesan en tu dispositivo y no se suben, registran ni almacenan en nuestros servidores.

Limitaciones

El embellecedor no valida el HTML ni corrige errores como etiquetas sin cerrar, y los espacios pueden ser significativos dentro de <pre> o del texto en línea, así que revise el resultado antes de publicar.

Preguntas frecuentes

¿Formatear cambia cómo se ve la página?

Solo cambia los espacios entre etiquetas. Los elementos en línea siguen en línea y el contenido de <pre> se conserva, pero añadir saltos de línea puede alterar el espaciado del texto en diseños poco habituales.

¿Qué hace la opción de ajuste de línea?

Las líneas más largas que el ancho se cortan en los espacios. Con 0, cada línea conserva la longitud del original, útil para valores de atributos largos.

¿Se envía mi HTML a un servidor?

No. El embellecedor se carga en su navegador y se ejecuta en local, por lo que su marcado nunca se sube.

Herramientas relacionadas

Más herramientas en Herramientas para desarrolladores →