Validación HTML: Valor incorrecto "false" para el atributo "hidden" en el elemento X.

Acerca de este problema HTML

El atributo hidden indica que un elemento no es todavía, o ya no es, relevante para el estado actual de la página. Los navegadores no renderizarán elementos que tengan este atributo. Está disponible en todos los elementos HTML como un atributo global.

En HTML, los atributos booleanos como hidden, disabled, readonly y checked siguen reglas especiales. A diferencia de los atributos en lenguajes de programación donde podrías establecer un valor a true o false, los atributos booleanos en HTML funcionan por presencia o ausencia:

Presente = la característica está activada (ej., hidden, hidden="", o hidden="hidden")
Ausente = la característica está desactivada (el atributo simplemente no está en el marcado)

Esta es una fuente común de confusión. Escribir hidden="false" no hace que el elemento sea visible. Porque el atributo sigue presente en el marcado, el navegador lo interpreta como “este elemento está oculto”. El valor de cadena real "false" es ignorado para determinar el estado booleano. Esto puede llevar a bugs frustrantes donde los elementos permanecen invisibles a pesar de lo que parece código correcto.

Según la especificación HTML, los únicos valores válidos para un atributo booleano son la cadena vacía ("") o el nombre del propio atributo (ej., hidden="hidden"). Cualquier otro valor, incluyendo "true" o "false", es inválido y activará un error del validador de W3C.

Cómo funciona el atributo `hidden` con valores más nuevos

Desde las actualizaciones más recientes de la especificación HTML, el atributo hidden también acepta el valor "until-found". Cuando se establece a hidden="until-found", el elemento permanece oculto pero puede ser revelado por la función de búsqueda en la página del navegador o por navegación de fragmentos. Este es el único valor de palabra clave (además de la cadena vacía y el nombre canónico del atributo) que cambia el comportamiento del atributo. No cambia el hecho de que "false" es un valor inválido.

Cómo solucionarlo

Para ocultar un elemento, añade el atributo hidden sin valor.
Para mostrar un elemento, elimina el atributo hidden completamente del marcado.
Si estás alternando la visibilidad con JavaScript, usa element.hidden = false (la propiedad JavaScript, no el atributo HTML) o element.removeAttribute('hidden').

Ejemplos

❌ Inválido: establecer `hidden` a `"false"`

<!-- El elemento SIGUE oculto y el marcado es inválido -->

<div hidden="false">No verás este texto.</div>

❌ Inválido: establecer `hidden` a `"true"`

<!-- "true" tampoco es un valor válido para un atributo booleano -->

<p hidden="true">Este párrafo está oculto, pero el marcado es inválido.</p>

✅ Válido: usar `hidden` sin valor

<div hidden>Este elemento está oculto de la página.</div>

✅ Válido: usar `hidden` con una cadena vacía o su propio nombre

<!-- Ambas son formas válidas de escribir atributos booleanos -->

<div hidden="">Elemento oculto</div>
<div hidden="hidden">También un elemento oculto</div>

✅ Válido: mostrar el elemento omitiendo `hidden`

<div>Este elemento es visible porque no tiene atributo hidden.</div>

✅ Válido: usar `hidden="until-found"`

<div hidden="until-found">
  Este contenido está oculto pero puede encontrarse mediante búsqueda del navegador.
</div>

Alternar visibilidad con JavaScript

Cuando muestres u ocultes elementos dinámicamente, usa la propiedad hidden en el elemento DOM en lugar de establecer el atributo a "false":

<button type="button" id="toggle">Alternar mensaje</button>
<p id="message" hidden>¡Hola! Ahora puedes verme.</p>
<script>
  document.getElementById("toggle").addEventListener("click", function () {
    const msg = document.getElementById("message");
    msg.hidden = !msg.hidden; // Alterna correctamente la propiedad booleana
  });
</script>

Usar msg.hidden = false en JavaScript elimina correctamente el atributo hidden del elemento. Esto es diferente de escribir hidden="false" directamente en HTML, lo que mantiene el atributo presente y activa el error de validación.