Minifique el código HTML al instante para reducir el tamaño del archivo y mejorar la velocidad de carga del sitio web.
Introducción
El HTML que usted escribe para editar y el HTML que llega al navegador no tienen por qué ser el mismo archivo. Mientras arma una página, la sangría y los saltos de línea hacen que la estructura se siga fácil, y los comentarios dejados en el marcado explican secciones o anotan algo para después. El navegador no necesita nada de eso para mostrar la página correctamente — solo necesita etiquetas válidas y bien formadas. Minificar quita lo que está ahí puramente para un lector humano, así que la misma página llega al navegador como un archivo más chico.
Cómo minifica su HTML esta herramienta
- Se eliminan todos los comentarios, sin excepciones. Cada bloque
<!-- ... -->se quita, incluidos los viejos comentarios condicionales de Internet Explorer y cualquier comentario que hubiera querido conservar, como un aviso de licencia o atribución. Acá no hay equivalente a la convención de «conservar este» que sí admite el minificador de CSS de este sitio — si un comentario importa, guárdelo en su copia de trabajo y no cuente con que sobreviva a la minificación. - El contenido dentro de las etiquetas
<pre>,<code>,<script>y<textarea>conserva su espaciado exacto. Los saltos de línea y los espacios tienen sentido dentro de esas etiquetas — un ejemplo de código o un bloque de texto preformateado se mostraría mal si se le juntara el espaciado interno —, y esta herramienta deja ese espacio en blanco intacto. - El espacio en blanco del resto se junta, no se borra. Una tira de espacios, tabulaciones o saltos de línea entre dos elementos en línea (un enlace dentro de una oración, por ejemplo) se reduce a un solo espacio en vez de quitarse del todo, para que las palabras contiguas no queden pegadas. Solo el espacio entre etiquetas estructurales de nivel superior y dentro de
<head>se recorta por completo, ya que ahí nada se muestra nunca como texto corrido visible. - La barra final de las etiquetas que se cierran solas se normaliza.
<img src="photo.jpg" />pasa a ser<img src="photo.jpg">— las dos formas son HTML válido, y la más corta ahorra unos caracteres en cada etiqueta autocerrada de la página.
El único riesgo real: comentarios dentro de contenido preformateado
Como la eliminación de comentarios ocurre en una primera pasada sobre todo lo que usted pegó, antes de que esta herramienta mire dentro de qué etiqueta está cada cosa, no puede distinguir entre un comentario común destinado a borrarse y el texto literal <!-- ... --> que usted muestra a propósito dentro de un bloque <pre> o <code> — por ejemplo, un ejemplo de código en un tutorial que enseña cómo se ve un comentario de HTML. En ese caso puntual, el texto del ejemplo se quitaría aunque el espaciado a su alrededor, dentro del mismo bloque, se conserve bien. Esto solo afecta al texto que contiene literalmente los caracteres <!-- y --> dentro de un bloque preformateado; no afecta a los ejemplos de código comunes que no incluyen sintaxis de comentario como parte de lo que muestran.
Qué conviene saber antes de minificar
Esta herramienta cambia solo el formato — no reordena elementos, no fusiona etiquetas ni saca nada de la estructura real de la página. No hay límite de tamaño para lo que pegue, ya que trabaja directamente con texto en lugar de subir un archivo; el HTML completo de una página, por largo que sea, se pega y se procesa igual que un fragmento corto.
Como con cualquier minificador, conviene cargar la salida minificada en un navegador antes de publicarla — no porque la conversión sea poco confiable, sino porque es buena práctica confirmar que una página se ve y se comporta como uno espera antes de que salga al aire, igual que se revisa cualquier otra cosa antes de entregarla o publicarla.
Cuándo esta es la herramienta adecuada
- Preparar una página para publicarla cuando ya terminó de editar. Siga trabajando con la versión legible mientras arma la página, y minifique una sola vez, justo antes de que salga al aire — no como formato de trabajo.
- Bajar el peso de la página en un hosting limitado o con conexión lenta. Un archivo HTML más chico se descarga más rápido, algo que pesa más de lo que parece en la red de una escuela o en un celular con datos móviles.
- Comparar código fuente para ver cómo es realmente el HTML de producción. Ver el código fuente de un sitio real muchas veces muestra un HTML compacto que no se parece en nada a lo que uno escribe a mano — minificar la página propia y compararlas lado a lado es una forma concreta de entender por qué.
Ejemplo
Una estudiante termina una página de portafolio personal para la clase de diseño web, con comentarios repartidos por el marcado que quedaron de borradores anteriores, más un ejemplo de código dentro de un bloque <pre> que muestra cómo se ve un comentario de HTML, como parte de explicar lo que aprendió. Antes de entregar el proyecto, pega la página completa acá. La página se ve y se comporta exactamente igual, los comentarios sueltos del borrador ya no están, y el archivo es más chico — pero el ejemplo del comentario dentro de la muestra de código también desapareció, porque justo contenía los caracteres literales <!--/-->. Ajustar ese ejemplo puntual para que evite la sintaxis exacta de comentario, o dejar esa sección afuera de lo que se minifica, resuelve el problema.
Preguntas frecuentes
¿Minificar cambia cómo se ve mi página?
No. Las etiquetas y la estructura se conservan — solo cambian el formato, el espacio en blanco y los comentarios, y nada de eso afecta cómo se muestra la página.
¿Qué pasa con los comentarios de mi HTML?
Se eliminan todos, sin excepciones — no hay manera de marcar un comentario para conservarlo, a diferencia del minificador de CSS de este sitio.
¿Se conserva el espacio en blanco dentro de un bloque <pre> o <code>?
Sí, el espaciado y los saltos de línea dentro de esas etiquetas, y dentro de <script> y <textarea>, quedan exactamente como usted los escribió. La única excepción es si ese contenido incluye literalmente sintaxis de comentario (<!-- -->) como texto que usted muestra — eso se quita junto con los comentarios genuinos, porque la eliminación de comentarios ocurre antes de que la herramienta mire dentro de qué etiqueta está.
¿Hay límite de tamaño?
No — usted está pegando texto, no subiendo un archivo, así que no hay un límite fijo como sí lo hay en las herramientas de carga de archivos de este sitio.
¿Se guarda mi código en algún lado?
No. El HTML pegado se procesa para producir el resultado minificado y no se almacena como archivo ni se conserva después; solo queda registrado que la herramienta se usó, no el código en sí.
¿Qué herramientas relacionadas puedo usar?
Para otros formatos de código, use CSS Minifier y JavaScript Minifier para minificar, o CSS Beautifier y JavaScript Beautifier para revertir el proceso.
