Formateador HTML

¿Qué es el formateo de HTML?

Un formateador de HTML es una herramienta que realiza el formateo de HTML (también llamado embellecimiento o pretty-printing): añade indentación consistente, saltos de línea y espaciado al marcado HTML para que su estructura de anidamiento sea visible. Los navegadores ignoran los espacios en blanco al renderizar HTML, por lo que un documento escrito en una sola línea produce el mismo resultado visual que uno con indentación cuidadosa. La diferencia es puramente para los humanos: el HTML formateado es más fácil de leer, depurar y mantener.

La especificación HTML (mantenida por WHATWG como el HTML Living Standard) define más de 110 elementos, cada uno con su propio modelo de contenido. Los elementos de bloque como <div>, <section> y <article> normalmente comienzan en una nueva línea e indentan a sus hijos. Los elementos vacíos como <br>, <img> e <input> no tienen etiqueta de cierre ni hijos que indentar. Un buen formateador entiende estas distinciones y aplica las reglas de indentación en consecuencia, en lugar de añadir espacios en blanco ciegamente después de cada etiqueta.

El formateo es más importante durante el desarrollo. El HTML minificado o generado por máquinas, la salida de plataformas CMS y el marcado copiado de las DevTools del navegador suelen llegar como una sola línea densa. Sin una indentación adecuada, encontrar una etiqueta de cierre ausente o rastrear una estructura profundamente anidada lleva significativamente más tiempo. Un formateador de HTML convierte esa pared de texto en una estructura de árbol correctamente indentada y legible en un solo paso.

¿Por qué usar este Formateador de HTML?

Pega cualquier HTML y obtén una salida correctamente indentada al instante. Sin plugins que instalar, sin archivos de configuración que escribir, sin cuentas que crear.

Casos de uso del Formateador de HTML

Reglas de indentación HTML

Cómo un formateador de HTML trata cada tipo de elemento depende de su modelo de contenido. La tabla a continuación muestra los elementos más comunes y cómo se indentan con configuraciones de 2 y 4 espacios. Ambas producen un renderizado idéntico en el navegador; la diferencia es de legibilidad.

Formateador vs. Minificador vs. Linter

Estas tres herramientas operan sobre HTML pero sirven propósitos distintos. El formateo y la minificación son transformaciones opuestas; el linting comprueba errores sin cambiar los espacios en blanco.

Ejemplos de código

Cómo formatear HTML mediante programación en los lenguajes y herramientas más populares:

import { html as beautify } from 'js-beautify'

const ugly = '<div><p>Hello</p><ul><li>One</li><li>Two</li></ul></div>'

const formatted = beautify(ugly, {
  indent_size: 2,
  indent_char: ' ',
  wrap_line_length: 80,
  preserve_newlines: false,
})
// → <div>
// →   <p>Hello</p>
// →   <ul>
// →     <li>One</li>
// →     <li>Two</li>
// →   </ul>
// → </div>

from bs4 import BeautifulSoup

ugly = '<div><p>Hello</p><ul><li>One</li><li>Two</li></ul></div>'

soup = BeautifulSoup(ugly, 'html.parser')
print(soup.prettify(formatter='minimal'))
# → <div>
# →  <p>
# →   Hello
# →  </p>
# →  <ul>
# →   <li>One</li>
# →   <li>Two</li>
# →  </ul>
# → </div>

package main

import (
    "bytes"
    "fmt"
    "golang.org/x/net/html"
    "strings"
)

func main() {
    ugly := "<div><p>Hello</p></div>"
    doc, _ := html.Parse(strings.NewReader(ugly))

    var buf bytes.Buffer
    html.Render(&buf, doc)
    fmt.Println(buf.String())
    // renders normalized HTML — pair with indent logic for pretty output
}

# Format a single file in place
npx prettier --write index.html

# Format and print to stdout (pipe-friendly)
npx prettier --parser html index.html

# Format with 4-space indentation
npx prettier --tab-width 4 --parser html index.html

# Format HTML from stdin
echo '<div><p>Hello</p></div>' | npx prettier --parser html

Preguntas frecuentes