Verificação HTML: Valor inválido X para o atributo "height" no elemento "iframe": Esperado um dígito mas encontrado Y em vez disso.

Sobre este problema HTML

O atributo height em <iframe> é definido na especificação HTML como um “número inteiro não-negativo válido”. Isto significa que o valor deve ser uma string de um ou mais caracteres dígito (0 até 9) e nada mais. Ao contrário das propriedades CSS, este atributo não aceita unidades como px ou %, nem aceita valores decimais como 315.5. Mesmo caracteres invisíveis como espaços no início ou no fim vão despoletar este erro de validação porque o analisador espera um dígito e encontra outra coisa.

Isto é importante por várias razões. Embora os navegadores sejam geralmente tolerantes e possam renderizar o iframe corretamente apesar de um valor inválido, depender do comportamento de recuperação de erros é frágil e pode não funcionar consistentemente em todos os navegadores ou versões futuras. Valores de atributos inválidos também podem causar resultados inesperados em ferramentas automatizadas, leitores de ecrã e outros agentes de utilizador que analisam HTML de forma rigorosa. Escrever markup válido e compatível com os padrões garante um comportamento previsível em todo o lado.

Causas comuns deste erro incluem:

Adicionar unidades CSS ao valor do atributo (ex: height="315px")
Usar percentagens (ex: height="100%")
Valores decimais (ex: height="315.5")
Espaços em branco antes ou depois do número (ex: height=" 315" ou height="315 ")
Artefactos de copiar-colar introduzindo caracteres ocultos

Se precisar de dimensionamento baseado em percentagem ou decimal, use CSS em vez do atributo HTML. O atributo height apenas aceita valores inteiros de píxeis.

Exemplos

❌ Inválido: Usar unidade `px` no atributo

<iframe width="560" height="315px" src="https://example.com/video"></iframe>

O validador vê o caractere p depois de 315 e reporta o erro.

❌ Inválido: Usar uma percentagem

<iframe width="100%" height="100%" src="https://example.com/video"></iframe>

Valores de percentagem não são permitidos no atributo height.

❌ Inválido: Valor decimal

<iframe width="560" height="315.5" src="https://example.com/video"></iframe>

O ponto decimal não é um dígito, então o validador rejeita-o.

❌ Inválido: Espaços em branco no início ou no fim

<iframe width="560" height=" 315 " src="https://example.com/video"></iframe>

O espaço antes de 315 é encontrado onde é esperado um dígito.

✅ Válido: Apenas dígitos

<iframe width="560" height="315" src="https://example.com/video"></iframe>

O valor 315 contém apenas dígitos e é um número inteiro não-negativo válido.

✅ Válido: Usar CSS para dimensionamento baseado em percentagem

Se precisar que o iframe escale de forma responsiva, remova o atributo height e use CSS em vez disso:

<iframe
  width="560"
  height="315"
  src="https://example.com/video"
  style="width: 100%; height: 100%;"
></iframe>

Ou melhor ainda, aplique estilos através de uma stylesheet:

<style>
  .responsive-iframe {
    width: 100%;
    height: 400px;
  }
</style>
<iframe class="responsive-iframe" src="https://example.com/video"></iframe>

Isto mantém os atributos HTML válidos enquanto lhe dá controlo total sobre o dimensionamento através de CSS, incluindo suporte para unidades como %, vh, em e calc().