Formateador HTML
Embellece HTML desordenado, o minifícalo para producción.
Funciona en tu navegador. Nada de lo que escribes se envía a ningún sitio.
- Sangría de 2 o 4 espacios
- Minificar con un clic
- Nada se sube
Cómo formatear HTML
- Pega tu HTML.
- Elige un tamaño de sangría, o activa minificar.
- Copia o descarga el resultado.
Embellecer frente a minificar
| Embellecer | Minificar | |
|---|---|---|
| Sangría | Añade 2, 4 u 8 espacios | La elimina |
| Comentarios | Se conservan | Se eliminan |
| Espacios entre etiquetas | Se normalizan | Se eliminan |
| Contenido en pre, textarea, script, style | Intacto | Intacto |
Dónde importa el HTML minificado
- Una página de producción carga un poco más rápido y usa menos ancho de banda una vez que desaparecen los espacios y comentarios.
- El marcado minificado es más difícil de leer en ver código fuente, lo cual es una compensación razonable en producción pero una desventaja al depurar.
Consejos para formatear HTML
- Guarda una copia legible y con sangría en el control de versiones y minifica solo lo que despliegas, ya que depurar marcado minificado a simple vista es lento.
- La sangría de 2 espacios va bien con marcado muy anidado, y la de 4 espacios es más fácil de leer en páginas simples y poco anidadas.
Qué afecta la sangría y qué no
- Nunca cambia lo que representa un navegador, ya que el espacio en blanco entre etiquetas de bloque se colapsa de todos modos.
- Puede desplazar visiblemente el espaciado entre elementos en línea como <span>, si un diseño depende de un espacio en blanco exacto ahí. Revisa esos puntos después de formatear.
- No tiene efecto en el comportamiento de JavaScript, ya que la estructura del DOM de la página sigue siendo la misma en ambos casos.
Preguntas frecuentes sobre Formateador HTML
¿Qué hace minificar aquí?
Elimina los comentarios y los espacios en blanco entre etiquetas, sin tocar el texto ni los atributos dentro de las etiquetas pre, textarea, script y style.
¿Formatear cambiará el aspecto de mi página?
No. La sangría y el espaciado entre etiquetas no afectan a la representación visual, así que la página se ve igual antes y después.
¿Corrige etiquetas rotas o sin cerrar?
No. Reformatea el HTML que le des. Corrige primero las etiquetas que falten o no coincidan en tu editor.
¿Puedo formatear un documento HTML completo?
Sí, incluyendo el doctype, el head y el body. Los documentos muy largos pueden tardar un momento en formatearse.
¿Valida mi HTML?
No. Reformatea o minifica el código que le des, y no comprueba textos alternativos faltantes, etiquetas sin cerrar u otros problemas de validación.
¿También se reformatean las etiquetas style y script en línea?
Sí, al embellecer. El formateador sangra el CSS dentro de una etiqueta style y el JavaScript dentro de una etiqueta script junto con el marcado que los rodea.
¿Minificar elimina comentarios usados por un sistema de plantillas?
Los comentarios HTML estándar (<!-- ... -->) siempre se eliminan, incluidos los que un sistema de plantillas pueda usar como marcadores. Si tus comentarios tienen algún significado, usa solo formatear y evita minificar.
¿Puedo formatear solo un fragmento, sin un documento completo?
Sí. Un fragmento de unas pocas etiquetas se formatea igual que una página entera. No necesita doctype, head ni body para funcionar.