Formateador y minificador de HTML

¿Qué es un formateador de HTML?#

Un formateador de HTML toma marcado que ha perdido su forma —salida de un motor de plantillas que colapsó cada etiqueta en una línea, un fragmento pegado con la sangría de otra persona, o un trozo de una plantilla de correo que creció durante meses— y lo resangra para que el anidamiento sea obvio de un vistazo. El trabajo inverso, minificar, comprime el mismo marcado eliminando todo lo que un navegador no necesita: comentarios y los espacios en blanco entre etiquetas.

Esta página hace ambos, y las dos direcciones se construyen de forma distinta porque el HTML lo exige. Formatear usa html_beautify de js-beautify, que sangra los elementos de forma consistente y conserva los saltos de línea que de verdad quieres. Minificar es un escáner conservador escrito a mano. La regla más importante que sigue es que el contenido de los elementos <pre>, <code>, <textarea>, <script> y <style> queda completamente intacto: colapsar los espacios dentro de un bloque <pre> o de un <script> corrompería la página, porque en esos elementos el espacio en blanco es parte del dato, no decoración. Un minificador ingenuo que no sabe esto es justo la razón por la que un ejemplo de código pierde de repente su sangría en un sitio en producción.

Cómo usarlo#

1. Pega tu marcado en el panel HTML de la izquierda, o pulsa Ejemplo para un documento de ejemplo corto.
2. Elige una Sangría en la barra de herramientas: 2, 4 (la opción por defecto para HTML) o tab. Cuatro espacios es un estilo de casa común para el marcado porque las etiquetas anidadas se acumulan rápido.
3. Pulsa una acción:
   • Formatear: resangra a través de js-beautify y conserva los saltos de línea existentes, así las líneas rotas a mano no se aplastan.
   • Minificar: elimina comentarios HTML, colapsa a nada los espacios en blanco entre etiquetas y recorta el espacio en blanco en los nodos de texto ordinarios, dejando el interior de <pre>, <code>, <textarea>, <script> y <style> exactamente como estaba escrito.
4. Lee el resultado en el panel de Salida. Usa Copiar en la cabecera de salida para llevártelo; Limpiar reinicia ambos paneles.

Características principales#

• Conserva lo que importa. El contenido de <pre>, <code>, <textarea>, <script> y <style> se copia literal durante el minificado. El espacio en blanco dentro de esos elementos es significativo; eliminarlo cambiaría lo que el navegador renderiza.
• Comentarios eliminados al minificar, conservados al formatear. Los bloques <!-- ... --> se eliminan solo cuando pides explícitamente minificar. Formatear los deja en su sitio.
• Sangría por defecto apta para HTML. Cuatro espacios, porque el marcado profundamente anidado se lee mejor con un paso más amplio. Cambia a 2 o tabulador si eso se ajusta a tu proyecto.
• Dos paneles, listos para copiar. Entrada editable, salida de solo lectura, copiado en un clic.
• Se ejecuta solo en tu navegador. js-beautify va empaquetado con la página y se carga bajo demanda; no hay backend, ni subida, y tu marcado se queda en tu dispositivo.

Ejemplo detallado#

Un fragmento de una tarjeta de producto extraído de una plantilla, con un comentario y un bloque <pre> dentro:

Entrada:

<div class="card">
<!-- price shown gross -->
<span class="price">£12.00</span>
<pre data-lang="bash">npm install
npm run build</pre>
</div>

Pulsa Formatear con 4 espacios:

<div class="card">
    <!-- price shown gross -->
    <span class="price">£12.00</span>
    <pre data-lang="bash">npm install
npm run build</pre>
</div>

Ahora pulsa Minificar sobre la misma entrada:

<div class="card"><span class="price">£12.00</span><pre data-lang="bash">npm install
npm run build</pre></div>

Tres cosas a destacar. El comentario ha desaparecido. Los espacios entre etiquetas han desaparecido: el </span> y el <pre> ahora quedan adyacentes, lo cual es seguro porque el espacio entre etiquetas en HTML es decorativo. Pero el salto de línea dentro del <pre> (npm install sobre npm run build) sigue ahí, exactamente como estaba escrito. Esa es la regla haciendo su trabajo: colapsar la decoración, preservar el dato.

Preguntas frecuentes#

¿Por qué se conservan algunos espacios simples entre etiquetas tras minificar?#

Los nodos de texto que son solo espacios en blanco y se sitúan entre etiquetas de nivel de bloque se eliminan por completo. Pero un espacio simple dentro de una línea de texto —Hello <em>world</em>— es significativo, porque eliminarlo uniría las palabras. El escáner conserva los espacios significativos en los nodos de texto y solo elimina los espacios entre etiquetas puramente decorativos.

¿Minificar elimina atributos, comillas o valores por defecto?#

No. No reescribe la sintaxis de los atributos, no elimina comillas, no colapsa atributos booleanos ni elimina type="text". Esas transformaciones requieren un analizador HTML completo con conocimiento del esquema y es fácil equivocarse; esta herramienta se mantiene en el lado seguro y solo elimina comentarios y espacios en blanco decorativos.

¿Minificará el JavaScript dentro de mis etiquetas <script>?#

No. Todo el contenido de <script> pasa intacto, tanto porque cambiarlo podría romper ASI como porque un minificador de JS aparte vive en la página format/js. Si quieres el script minificado, extráelo, pásalo por esa herramienta y vuelve a pegarlo.

¿Entiende la sintaxis de plantillas como {{ var }} o {% if %}?#

Formatear resangrará alrededor de los tokens de plantilla y normalmente produce una salida legible. Minificar trata las etiquetas de plantilla como texto ordinario, así que no colapsará los espacios dentro de ellas de una forma que cambie su significado. Para plantillas pesadas, trata la salida como un punto de partida sólido y verifica contra tu renderizador.