Formatear o minificar HTML
Formateador y minificador HTML gratuito online — pegue un bundle minificado y léalo indentado, o ahorre bytes en una plantilla de email antes de desplegarla. El modo de detección automática elige la dirección correcta (entrada compacta de una línea → salida indentada, entrada indentada → salida de una línea) o elija manualmente. Indenta con 2 espacios, 4 espacios o tabs. Los elementos void (br, hr, img, input, meta, link) pueden auto-cerrarse estilo XHTML o dejarse desnudos estilo HTML5. El contenido de <pre>, <script> y <style> se preserva literalmente — los formateadores que estropean estos bloques rompen los ejemplos de código con resaltado de sintaxis en cualquier blog. Los comentarios pueden eliminarse opcionalmente en ambas direcciones.
Cómo usar
La dirección se auto-detecta por defecto.
2 espacios es el estándar para la mayoría de las guías de estilo frontend.
Versión embellecida o minificada aparece a la derecha.
Portapapeles de un clic o guarda como .html.
Embellece o minifica HTML en el navegador — preserva contenido de <pre>, <script>, <style> literalmente
Funciones
Usos típicos
- Embellece un archivo HTML minificado copiado-pegado para inspeccionar su estructura.
- Minifica una plantilla HTML de email antes de desplegar — ahorra bytes en cada envío.
- Convierte elementos void HTML5 a auto-cerrado XHTML para un pipeline XML-estricto.
- Elimina comentarios de desarrollador de un build HTML de producción.
- Re-indenta una plantilla editada a mano para coincidir con las convenciones del equipo.
Por qué este
Muchos formateadores en el navegador destrozan el contenido de <pre> o <script> — copie un fragmento de código por uno de ellos y su indentación queda arruinada. Este reconoce elementos de texto sin procesar (script, style, pre, textarea) y deja su contenido en paz byte por byte. Todo lo demás obtiene indentación limpia por bloque. Sin registro, sin cuota por archivo.
Preguntas frecuentes
¿Qué es un "elemento void"?
Un elemento HTML que no tiene etiqueta de cierre ni contenido — br, hr, img, input, meta, link, source, track, area, base, col, embed, param, wbr. En HTML5 estos pueden escribirse como <br> (preferido) o <br /> (XHTML legacy). Elige el que tu linter espere.
¿Modifica contenido dentro de <script> o <style>?
No. Cualquier cosa dentro de <script>, <style>, <pre> y <textarea> se preserva byte por byte. El manejo de espacios alrededor de estas etiquetas sigue las reglas de elementos de texto sin procesar HTML5.
¿Por qué mi salida minificada todavía tiene espacios?
La minificación colapsa el espacio entre etiquetas pero preserva al menos un espacio donde es semánticamente significativo (entre elementos inline como <span> o <a>) — eliminar esos espacios cambia visiblemente la página renderizada. Para limpieza agresiva de espacios use un minificador de tiempo de build (html-minifier-terser, htmlnano) donde pueda ajustar el equilibrio.
¿Esto arreglará etiquetas no cerradas?
No — la herramienta es puramente un formateador. Si tienes <div>s no cerrados, la salida reflejará la estructura (rota). Usa un validador como W3C Nu Validator para lint estructural.
¿Maneja sintaxis de templating como @{{ ... }} o {% %}?
Intenta dejar la mayoría de los tokens de templating intactos, pero Blade ({{ }}), Twig ({% %}), Vue ({{ }}), etc. aún pueden quedar con espaciado extraño. Para plantillas con interpolación pesada, formatea el HTML renderizado o usa una herramienta consciente de templating.
¿Móvil?
Sí — entrada y salida se apilan en pantallas estrechas.
Podemos hacerlo — ¡y es gratis! Solo envíanos un mensaje rápido con tu idea. Si quieres comentarla en detalle, déjanos tu email y te responderemos. Puedes mantener el anonimato.
