Herramienta de Formato HTML

El formateo HTML reorganiza marcado desordenado o comprimido en código legible con indentación coherente, saltos de línea y jerarquía de etiquetas visible. Facilita revisión, depuración, enseñanza, entrega entre equipos y mantenimiento, sobre todo al buscar etiquetas sin cerrar, anidación incorrecta, listas largas de atributos o HTML generado difícil de leer. En producción también puede convenir lo contrario: la minificación elimina espacios, comentarios y saltos innecesarios para reducir el tamaño transferido. La herramienta ayuda a pasar entre HTML legible y compacto, pero no corrige automáticamente estructura semántica, accesibilidad, enlaces rotos, contenido embebido inseguro ni errores propios de plantillas.

Un formateador HTML sigue el algoritmo de construcción de árbol del WHATWG HTML Standard. Los bytes se decodifican (típicamente UTF-8 según el meta charset o BOM), el tokenizador recorre los estados data, RCDATA, RAWTEXT, script-data y varios estados de atributos definidos en §13.2.5, y la etapa de construcción de árbol construye un DOM usando la máquina de estados de modo de inserción (initial, before html, in head, in body, in table, in select, etc.). El analizador es tolerante por diseño: un `<p>` sin cerrar se cierra automáticamente cuando sigue un bloque, un `</tr>` huérfano se ignora y un `<table>` mal ubicado se reubica mediante foster parenting. Los analizadores de grado navegador exponen esto a través de `new DOMParser().parseFromString(src, 'text/html')`; las herramientas del lado de Node usan parse5 (la implementación de referencia whatwg), htmlparser2 o cheerio. La reimpresión recorre el árbol resultante y serializa según la categoría del elemento. Los elementos vacíos - `area`, `base`, `br`, `col`, `embed`, `hr`, `img`, `input`, `link`, `meta`, `source`, `track`, `wbr` - nunca reciben una etiqueta de cierre en HTML5 (el autocierre XHTML `/>` está permitido pero es opcional). Los contenedores a nivel de bloque (`div`, `section`, `article`, `header`, `footer`, `nav`, `main`, `ul`, `ol`, `li`, `table`) ocupan su propia línea con espacios de profundidad*sangría; el contenido de frase/inline (`span`, `a`, `strong`, `em`, `code`) se mantiene en línea porque CSS `white-space: normal` colapsa secuencias de espacios en blanco en un solo carácter. Dos tipos de elementos deben preservarse textualmente: `<pre>` y `<textarea>` llevan semántica `white-space: pre` y su salto de línea inicial es consumido por el analizador; los cuerpos de `<script>` y `<style>` son RAWTEXT, por lo que re-indentar su contenido cambiaría el comportamiento en tiempo de ejecución - normalmente se delegan a un subformateador JS o CSS y se reinsertan. La serialización de atributos normaliza las comillas (simples vs dobles) y recodifica los delimitadores embebidos mediante las referencias de caracteres con nombre `&amp;`, `&lt;`, `&gt;`, `&quot;` y la numérica `&#39;`. El orden de atributos no es significativo en el DOM, por lo que los formateadores típicamente aplican un orden estable (`id`, `class`, luego alfabético). El ajuste de línea se activa más allá de un printWidth configurado: los atributos se dividen uno por línea con el `>` de cierre ya sea en su propia línea (prettier-plugin-html `bracketSameLine: false`) o pegado. La minificación revierte el proceso: se elimina el espacio en blanco entre etiquetas de bloque, se eliminan los comentarios excepto los condicionales IE `<!--[if`, y se eliminan las comillas de atributos cuyo valor coincida con `[A-Za-z0-9._-]+`. Ambas operaciones son O(n) sobre la longitud de la entrada.

• Analizador: construcción de árbol WHATWG HTML (§13) vía `DOMParser('text/html')` en el navegador, parse5/htmlparser2/cheerio en Node; la máquina de estados de modo de inserción maneja etiquetas faltantes/mal ubicadas y foster parenting.
• Elementos vacíos (sin etiqueta de cierre): area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr - 14 elementos según el HTML Living Standard. El autocierre XHTML `/>` se tolera pero es redundante.
• Elementos que preservan espacios en blanco: `<pre>` y `<textarea>` llevan CSS `white-space: pre` y consumen un salto de línea inicial; sus bytes interiores nunca se re-indentan o la salida visible cambia.
• Contextos RAWTEXT: los cuerpos de `<script>` y `<style>` no son HTML - se delegan a subformateadores JS/CSS (o se dejan textualmente). Re-indentar texto dentro de un literal regex o una cadena rompería la semántica en tiempo de ejecución.
• Normalización de atributos: se elige el estilo de comillas (simples/dobles), los delimitadores embebidos se recodifican con las cinco referencias con nombre (`&amp;`, `&lt;`, `&gt;`, `&quot;`, `&#39;`), se aplica un orden estable (id, class, luego alfabético) ya que el orden en el DOM no es significativo.
• Ajuste de línea pasado printWidth (típicamente 80/100/120): los atributos se dividen uno por línea con el `>` de cierre ya sea en su propia línea o pegado al último atributo, reflejando la opción `bracketSameLine` de prettier-plugin-html.
• Minificación: colapsa espacios en blanco entre etiquetas, elimina comentarios (manteniendo los condicionales `<!--[if IE]>`), elimina etiquetas de cierre opcionales (`</li>`, `</p>` cuando les sigue un hermano) y quita comillas de atributos que coincidan con `[A-Za-z0-9._-]+`; el ida y vuelta es O(n).