Formateador HTML

Para qué sirve un formateador HTML

Un formateador HTML te ayuda cuando el código llega en un estado difícil de leer, algo muy habitual. Una exportación de un CMS pone una página entera en una sola línea. Un motor de plantillas deja huecos extraños. Copiar desde el código fuente del navegador te da lo que el servidor envió, tal cual. El formateador reconstruye la sangría para que cada elemento anidado quede un nivel por debajo de su padre, y así ves la estructura de la página de un vistazo.

Esta página usa Prettier 3 en tu navegador. Además del marcado, formatea el CSS dentro de las etiquetas style y el JavaScript dentro de las etiquetas script, así que una página completa queda ordenada de una sola pasada.

Cómo usarlo

1. Pega tu HTML en el cuadro de la izquierda. El formateo empieza en cuanto lo pegas.
2. O pulsa Abrir archivo para cargar un archivo .html, o Ejemplo para probar con una muestra.
3. Elige la Sangría: 2 espacios, 4 espacios o tabulaciones.
4. Ajusta el Ancho de línea. Las líneas con muchos atributos o con texto largo se parten en ese ancho.
5. Elige un modo de Espacios en blanco: Respetar display de CSS, Ignorar o Estricto. El predeterminado es el seguro.
6. Pulsa Formatear o Ctrl+Intro. Pulsa Minificar para obtener la versión compacta.
7. Pulsa Copiar, o Descargar para guardar un archivo .html.

Una vez que el formateador se ha ejecutado, actualiza el resultado mientras escribes. Si un bloque script o style de la página tiene un error de sintaxis, ese bloque se queda tal como lo escribiste y el resto de la página se formatea igualmente. Para encontrar el error, pega el script en el formateador JavaScript, que indica la línea y la columna.

Antes y después

Una línea de HTML:

<!DOCTYPE html><html><head><title>Shop</title></head><body><nav><a href="/">Home</a><a href="/cart">Cart</a></nav><main><h1>Welcome</h1><p>Pick a <b>product</b> to start.</p><ul><li>Tea</li><li>Coffee</li></ul></main></body></html>

Después de Formatear con 2 espacios:

<!DOCTYPE html>
<html>
  <head>
    <title>Shop</title>
  </head>
  <body>
    <nav><a href="/">Home</a><a href="/cart">Cart</a></nav>
    <main>
      <h1>Welcome</h1>
      <p>Pick a <b>product</b> to start.</p>
      <ul>
        <li>Tea</li>
        <li>Coffee</li>
      </ul>
    </main>
  </body>
</html>

Los dos enlaces del nav se quedan en una sola línea. En el código original no hay espacio entre ellos, y añadir un salto de línea pondría un hueco visible entre ambos. Ese es el modo Respetar display de CSS en acción.

Los bloques incrustados se formatean con sus propias reglas:

<style>
  body {
    margin: 0;
  }
</style>
<script>
  const a = 1;
  console.log(a);
</script>

La opción Espacios en blanco

En HTML, un salto de línea entre dos elementos en línea se muestra como un espacio. Por eso los formateadores tienen que ir con cuidado. Este es el mismo párrafo con un ancho de línea de 40.

Con Respetar display de CSS:

<p>
  Read the <a href="/terms">terms</a>,
  then press <button>Accept</button>.
</p>

Con Ignorar:

<p>
  Read the
  <a href="/terms">terms</a>
  , then press
  <button>Accept</button>
  .
</p>

La segunda versión parece más ordenada, pero ahora el navegador muestra un espacio antes de la coma y antes del punto final. Usa Ignorar solo con marcado donde eso no importe, como plantillas de correo que revisas a ojo, o HTML con estilo de XML sin texto en línea.

Minificar HTML

Minificar reduce la página sin cambiar lo que muestra. Para esta entrada:

<div class="card">
  <!-- price -->
  <p>
    Only   <b>$5</b>   today
  </p>
</div>

el resultado es:

<div class="card"><p>Only <b>$5</b> today</p></div>

Se quitan los comentarios, los espacios repetidos se convierten en uno y desaparecen los espacios junto a elementos de bloque como div y p. Los espacios entre palabras en línea se quedan, porque quitarlos juntaría las palabras. El contenido de pre, textarea y script no se toca, y el CSS de las etiquetas style se minifica con las mismas reglas seguras que el formateador CSS.

Límites

• HTML es tolerante, así que una etiqueta de cierre que falta no suele ser un error. La entrada <div><p>Hello</div> vuelve como <div><p>Hello</p></div>, con el párrafo cerrado por ti. Revisa el resultado para detectar las etiquetas que olvidaste.
• El formateo no valida atributos, no revisa la accesibilidad ni corrige anidamientos no válidos. Para eso usa el validador del W3C.
• La sintaxis de plantillas como Handlebars o Jinja puede confundir al analizador. Formatea el HTML ya generado, o usa un formateador pensado para ese lenguaje de plantillas.

Otras formas de formatear HTML

• VS Code incluye un formateador de HTML. Ejecuta Dar formato al documento (Mayús+Alt+F en Windows, Mayús+Option+F en macOS). La extensión de Prettier da un resultado igual al de esta página.
• Línea de comandos: npx prettier --write index.html.
• Las herramientas para desarrolladores del navegador muestran un árbol DOM con formato en el panel Elements (Elementos), pero es la página en vivo después de ejecutar los scripts, no tu código fuente.

Si necesitas el contenido de una página en Markdown en lugar de HTML, el convertidor de HTML a Markdown se encarga de eso. Para scripts fuera de la página, usa el formateador JavaScript.