Verificação HTML: Valor inválido "false" para o atributo "hidden" no elemento X.

Sobre este problema HTML

O atributo hidden indica que um elemento ainda não é, ou já não é, relevante para o estado atual da página. Os browsers não renderizam elementos que têm este atributo. Está disponível em todos os elementos HTML como um atributo global.

Em HTML, atributos booleanos como hidden, disabled, readonly e checked seguem regras especiais. Ao contrário de atributos em linguagens de programação onde você poderia definir um valor como true ou false, os atributos booleanos em HTML funcionam por presença ou ausência:

Presente = a funcionalidade está ativa (por exemplo, hidden, hidden="", ou hidden="hidden")
Ausente = a funcionalidade está desativa (o atributo simplesmente não está na marcação)

Esta é uma fonte comum de confusão. Escrever hidden="false" não torna o elemento visível. Porque o atributo ainda está presente na marcação, o browser interpreta-o como “este elemento está oculto.” O valor literal da string "false" é ignorado para o propósito de determinar o estado booleano. Isto pode levar a bugs frustrantes onde os elementos permanecem invisíveis apesar do que parece ser código correto.

De acordo com a especificação HTML, os únicos valores válidos para um atributo booleano são a string vazia ("") ou o próprio nome do atributo (por exemplo, hidden="hidden"). Qualquer outro valor, incluindo "true" ou "false", é inválido e irá desencadear um erro do validador W3C.

Como o atributo `hidden` funciona com valores mais recentes

Começando com atualizações mais recentes da especificação HTML, o atributo hidden também aceita o valor "until-found". Quando definido como hidden="until-found", o elemento permanece oculto mas pode ser revelado pela funcionalidade de pesquisar na página do browser ou por navegação de fragmento. Este é o único valor palavra-chave (além da string vazia e do nome canónico do atributo) que altera o comportamento do atributo. Não altera o facto de que "false" é um valor inválido.

Como corrigir

Para ocultar um elemento, adicione o atributo hidden sem valor.
Para mostrar um elemento, remova o atributo hidden completamente da marcação.
Se estiver alternando visibilidade com JavaScript, use element.hidden = false (a propriedade JavaScript, não o atributo HTML) ou element.removeAttribute('hidden').

Exemplos

❌ Inválido: definir `hidden` como `"false"`

<!-- O elemento AINDA ESTÁ oculto e a marcação é inválida -->

<div hidden="false">Você não verá este texto.</div>

❌ Inválido: definir `hidden` como `"true"`

<!-- "true" também não é um valor válido para um atributo booleano -->

<p hidden="true">Este parágrafo está oculto, mas a marcação é inválida.</p>

✅ Válido: usar `hidden` sem valor

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

✅ Válido: usar `hidden` com uma string vazia ou o seu próprio nome

<!-- Ambas são formas válidas de escrever atributos booleanos -->

<div hidden="">Elemento oculto</div>
<div hidden="hidden">Também um elemento oculto</div>

✅ Válido: mostrar o elemento omitindo `hidden`

<div>Este elemento é visível porque não tem atributo hidden.</div>

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

<div hidden="until-found">
  Este conteúdo está oculto mas pode ser encontrado via pesquisa do browser.
</div>

Alternar visibilidade com JavaScript

Quando mostrar ou ocultar elementos dinamicamente, use a propriedade hidden no elemento DOM em vez de definir o atributo como "false":

<button type="button" id="toggle">Alternar mensagem</button>
<p id="message" hidden>Olá! Agora pode ver-me.</p>
<script>
  document.getElementById("toggle").addEventListener("click", function () {
    const msg = document.getElementById("message");
    msg.hidden = !msg.hidden; // Alterna corretamente a propriedade booleana
  });
</script>

Usar msg.hidden = false em JavaScript remove corretamente o atributo hidden do elemento. Isto é diferente de escrever hidden="false" diretamente em HTML, que mantém o atributo presente e desencadeia o erro de validação.