Formateo de HTML: Formateador de HTML Online

Salida Formateada

Cuándo se aplica el formateador a la entrada anterior, produce:

<div class="container">
  <header class="header">
    <nav>
      <a href="/" class="logo">DevBento</a>
      <ul class="nav-list">
        <li><a href="/tools">Tools</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section class="hero">
      <h1>Developer Tools</h1>
      <p>Free, privacy-first tools that run in your browser.</p>
      <a href="/tools" class="cta-button">Get Started</a>
    </section>
  </main>
  <footer>
    <p>&copy; 2024 DevBento</p>
  </footer>
</div>

La estructura anidada se vuelve inmediatamente visible. Las regiones header, main y footer son evidentes. Cada li permanece en una sola línea porque su contenido es un único elemento inline.

Reglas de Formateo HTML

El formateo HTML sigue un pequeno conjunto de reglas en las que la mayoría de las herramientas coinciden:

Los elementos bloque (div, section, header, main, footer, ul, ol, li, p, h1 a h6, table, form) ocupan su propia línea. Cada elemento hijo se sangra un nivel respecto a su padre.

Los elementos inline (a, span, strong, em, code, img) se mantienen en la misma línea que el contenido circundante cuando es posible. Un li que contiene una sola etiqueta a permanece en una línea. Un p con texto mixto y elementos inline se mantiene en una línea.

Los elementos void (br, hr, img, input, meta, link) no reciben etiqueta de cierre. El formateador preserva la convención que ya existe en el archivo a menos que lo configures para normalizarla.

Los atributos permanecen en la misma línea que la etiqueta de apertura a menos que el limite de longitud de línea active el ajuste de atributos. Cuándo los atributos se envuelven, cada atributo va en su propia línea debajo del nombre de la etiqueta y el carácter > de cierre va en su propia línea.

Cuando Importa el Formateo HTML

El HTML no formateado presenta problemas en varias situaciones específicas:

Revisión de código

Un diff de pull request que cambia un elemento anidado dentro de HTML no formateado mueve toda la línea, no solo el cambio real. El revisor no puede distinguir entre un cambio de contenido y una ruptura de línea. Con HTML formateado, solo la línea relevante cambia.

Depuración

Cuándo un layout se rompe, el primer paso es verificar que la estructura HTML sea correcta. El HTML formateado revela etiquetas de cierre faltantes, elementos mal colocados y profundidad de anidamiento inesperada. El HTML sin formato oculta estos problemas detras de un muro de texto.

Colaboración

Dos desarrolladores que formatean HTML de manera diferente producen diffs conflictivos. Un formateador compartido (Prettier, un hook de pre-commit) elimina este problema. El equipo acuerda una configuración y el formateador la aplica.

Elegir un Formateador HTML

Prettier es el estándar para la mayoría de los proyectos modernos. Se integra con editores, hooks de pre-commit y pipelines CI. Su salida no es configurable por diseño, lo cual es intencional: elimina la discusión sobre el estilo del código.

HTMLHint y tidy son alternativas más configuradas. Te permiten establecer el tamaño de sangria, el ajuste de atributos y el manejo de elementos void. La desventaja es que alguien tiene que mantener esa configuración.

Para ediciones únicas, el formateador en esta página aplica reglas estándar sin configuración. Pegalo, formatealo y listo.