Formateador de HTML

Cómo usar el formateador de HTML

1. Pega tu HTML en el cuadro de entrada: una página completa, una plantilla o un fragmento copiado de las herramientas para desarrolladores del navegador.
2. Haz clic en Embellecer para aplicar sangría al código de modo que cada elemento anidado quede en su propia línea.
3. Haz clic en Minificar para quitar los comentarios y los espacios innecesarios y obtener un archivo más pequeño.
4. Vuelve a pegar el resultado en tu editor o CMS.

El formateador funciona por completo en tu navegador. Tu código no se sube ni se guarda, y se trata como texto: no se ejecuta nada de lo que pegas.

¿Por qué formatear HTML?

El HTML que generan los creadores de páginas, los editores de correo, las exportaciones de un CMS y las herramientas de compilación suele estar minificado o mal sangrado. A los navegadores les da igual, pero a las personas les cuesta seguir la estructura. El HTML embellecido muestra con claridad el árbol del documento, así que puedes ver dónde se cierra cada <div>, encontrar un elemento fuera de sitio y revisar los cambios en un diff.

La minificación funciona al revés. Quitar comentarios, sangrías y saltos de línea reduce el tamaño del archivo, lo que disminuye un poco el volumen de transferencia. En la mayoría de los sitios, la compresión del servidor (gzip o Brotli) ya reduce bastante el HTML, así que minificar aporta una ganancia adicional menor, pero sigue siendo habitual en las compilaciones de producción.

Problemas comunes de HTML y cómo solucionarlos

Los navegadores son tolerantes: el algoritmo de análisis de HTML se recupera de la mayoría de los errores en lugar de fallar. Es cómodo, pero significa que el código defectuoso a menudo se ve «casi bien» y provoca errores de maquetación desconcertantes. Embellecer el código hace que estos problemas se vean con más facilidad.

Elementos sin cerrar. Cuando la sangría se desplaza cada vez más a la derecha y nunca vuelve, probablemente hay un elemento sin cerrar:

<div class="card">
  <div class="card-body">
    <p>Hello
</div>

El único </div> cierra card-body (y termina implícitamente el párrafo), así que el card exterior queda abierto y se traga todo lo que viene después. Cierra cada elemento de forma explícita:

<div class="card">
  <div class="card-body">
    <p>Hello</p>
  </div>
</div>

Elementos de bloque dentro de elementos en línea o dentro de <p>. No se permite un <div> dentro de un <p>: el navegador cierra el párrafo antes de tiempo y tu CSS deja de aplicarse como esperabas.

Etiquetas mal anidadas. <b><i>text</b></i> debería ser <b><i>text</i></b>. Los elementos interiores deben cerrarse antes que los exteriores.

ID duplicados. Un id debe ser único en el documento. Los duplicados rompen getElementById, la asociación de etiquetas y los anclajes dentro de la página.

Elementos vacíos y espacios en blanco

Algunos elementos nunca pueden tener contenido ni llevan etiqueta de cierre. Estos elementos vacíos son:

En HTML, <br> y <br /> son equivalentes; la barra final es opcional. Escribir </br> o <img></img> es un error.

Los espacios en blanco entre elementos en línea pueden verse. Dos botones inline-block separados por un salto de línea muestran un pequeño hueco, mientras que los mismos botones en una sola línea no. Un buen formateador conserva exactamente el contenido de <pre> y <textarea>, pero si la maquetación cambia ligeramente después de embellecer o minificar, la causa habitual son los espacios entre elementos en línea.

Consejos y buenas prácticas

• Usa sangrías de dos espacios; con cuatro, el HTML muy anidado se vuelve muy ancho.
• Pasa los bloques <style> y <script> en línea de gran tamaño a archivos aparte y ordénalos con el formateador de CSS y el formateador de JavaScript.
• Minifica como parte de tu proceso de compilación, no a mano, para que el código fuente legible siga en el control de versiones.
• Después de publicar, comprueba el SEO on-page de la página con el analizador SEO y su tiempo de carga con el test de velocidad web.

Preguntas frecuentes

¿Embellecer el código cambia el aspecto de mi página?

Normalmente no. Añadir sangría entre elementos de bloque no tiene ningún efecto visible. Los espacios entre elementos en línea pueden crear o eliminar pequeños huecos, así que revisa después de formatear las páginas con maquetaciones en línea muy ajustadas.

¿Es un validador de HTML?

No. Vuelve a sangrar y minifica el código, pero no lo comprueba según la especificación de HTML. Eso sí, el formateo hace que muchos errores de estructura se detecten a simple vista.

¿El HTML minificado es mejor para el SEO?

Los buscadores leen igual de bien el HTML minificado y el formateado. Minificar puede hacer las páginas algo más pequeñas, lo que mejora un poco el rendimiento, pero el contenido, la estructura y la velocidad importan mucho más que los espacios en blanco.

¿Puedo formatear plantillas de correo en HTML?

Sí. El HTML de los correos suele basarse en tablas anidadas y estilos en línea, y embellecerlo facilita mucho su edición. Prueba después el resultado en tu plataforma de correo, ya que algunos clientes de correo son sensibles a los espacios en blanco.

Actualizado 2026-10-17