Acerca de este problema HTML
La especificación HTML define los atributos booleanos como atributos cuya presencia indica un estado true y cuya ausencia indica false. Según el estándar HTML de WHATWG, un atributo booleano solo puede tener tres representaciones válidas:
-
Solo el nombre del atributo (ej.,
async) -
El atributo con un valor de cadena vacía (ej.,
async="") -
El atributo con un valor que coincida con su propio nombre, sin distinguir mayúsculas y minúsculas (ej.,
async="async")
Cualquier otro valor — como async="true", async="1", async="yes", o async="false" — es HTML inválido y activará este error de validación. Este es un malentendido común porque los desarrolladores a menudo asumen que los atributos booleanos funcionan como valores booleanos en lenguajes de programación, donde asignarías true o false.
Por qué esto importa
Aunque la mayoría de navegadores son permisivos y tratarán cualquier valor de async como el estado true (ya que el atributo está presente independientemente de su valor), usar valores inválidos crea varios problemas:
- Cumplimiento de estándares: HTML inválido puede causar problemas con analizadores estrictos, validadores o herramientas que procesan tu marcado.
-
Intención engañosa: escribir
async="false"no desactiva el comportamiento asíncrono — el atributo sigue presente, por lo que el navegador lo trata como habilitado. Esto puede llevar a errores confusos donde un script se comporta de forma asíncrona aunque el desarrollador tenía la intención contraria. -
Mantenibilidad: otros desarrolladores que lean el código pueden malinterpretar
async="false"como que realmente desactiva la carga asíncrona.
Para desactivar el comportamiento asíncrono, debes eliminar el atributo por completo en lugar de configurarlo como "false".
Cómo funciona async
Para scripts clásicos con un atributo src, el atributo async hace que el script se obtenga en paralelo con el análisis HTML y se ejecute tan pronto como esté disponible, sin esperar a que termine el análisis del documento.
Para scripts de módulo (type="module"), el atributo async hace que el módulo y todas sus dependencias se obtengan en paralelo y se ejecuten tan pronto como estén listos, en lugar de esperar hasta que se haya analizado el documento (que es el comportamiento diferido predeterminado para módulos).
Ejemplos
❌ Inválido: valores arbitrarios en async
<!-- Mal: "true" no es un valor de atributo booleano válido -->
<script async="true" src="app.js"></script>
<!-- Mal: "1" no es un valor de atributo booleano válido -->
<script async="1" src="analytics.js"></script>
<!-- Mal: "yes" no es un valor de atributo booleano válido -->
<script async="yes" src="tracker.js"></script>
<!-- Mal y engañoso: esto NO desactiva async -->
<script async="false" src="app.js"></script>
✅ Válido: uso correcto de atributo booleano
<!-- Preferido: solo el nombre del atributo -->
<script async src="app.js"></script>
<!-- También válido: valor de cadena vacía -->
<script async="" src="app.js"></script>
<!-- También válido: valor que coincide con el nombre del atributo -->
<script async="async" src="app.js"></script>
<!-- Forma correcta de desactivar async: eliminar el atributo -->
<script src="app.js"></script>
✅ Válido: async con scripts de módulo
<script async type="module" src="app.mjs"></script>
<script async type="module">
import { init } from './utils.mjs';
init();
</script>
Esta misma regla se aplica a todos los atributos booleanos en HTML, incluyendo defer, disabled, checked, required, hidden, y otros. En caso de duda, usa el nombre del atributo por sí solo sin valor — es la forma más limpia y más ampliamente reconocida.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.
Más información: