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

Sobre este problema HTML

De acordo com a especificação HTML, os atributos width e height em elementos <iframe> aceitam apenas um número inteiro não negativo válido — uma sequência de um ou mais dígitos ASCII (0–9) sem casas decimais, espaços ou sufixos de unidade como px. Isto é diferente do CSS, onde propriedades como width e height aceitam valores decimais e unidades. Os atributos HTML representam dimensões em píxeis CSS implicitamente, portanto apenas números inteiros são permitidos.

Quando o validador W3C reporta “Esperado um dígito mas encontrado ‘.’ em vez disso”, significa que estava a analisar o valor do atributo caractere por caractere e encontrou um ponto (.) onde apenas dígitos são válidos. Isto acontece tipicamente quando os autores copiam valores calculados ou fracionários de ferramentas de design, cálculos JavaScript ou CSS para atributos HTML.

Por que isto é importante

Conformidade com os padrões: Os navegadores podem lidar com valores de atributos inválidos de forma inconsistente. Embora a maioria dos navegadores modernos analise e truncue valores decimais com elegância, o comportamento não é garantido e fica fora da especificação.
Renderização previsível: Depender de como os navegadores lidam com valores malformados pode levar a diferenças subtis entre motores de navegador. Usar números inteiros válidos garante comportamento consistente em todos os lugares.
Qualidade de código: Marcação limpa e válida é mais fácil de manter e sinaliza profissionalismo, o que é especialmente importante para bases de código partilhadas e projetos colaborativos.

Como corrigir

Arredonde o valor para o número inteiro mais próximo. Use regras padrão de arredondamento: arredonde para cima se a parte decimal for .5 ou maior, arredonde para baixo caso contrário.
Remova qualquer casa decimal e dígitos seguintes do valor do atributo.
Se você precisar de dimensões precisas e fracionárias, use CSS em vez de atributos HTML. As propriedades CSS width e height aceitam valores decimais com unidades (por exemplo, 602.88px).

Exemplos

❌ Inválido: valores decimais em `width` e `height`

<iframe src="example.html" height="602.88" width="800.2"></iframe>

O validador irá sinalizar ambos os atributos porque 602.88 e 800.2 contêm um caractere ..

✅ Corrigido: valores em números inteiros

<iframe src="example.html" height="603" width="800"></iframe>

Os valores decimais foram arredondados para o número inteiro mais próximo: 602.88 torna-se 603, e 800.2 torna-se 800.

✅ Alternativa: usar CSS para dimensões precisas

Se você precisar de dimensões fracionárias exatas, mova o dimensionamento para CSS e remova completamente os atributos HTML:

<iframe src="example.html" style="height: 602.88px; width: 800.2px;"></iframe>

Ou, melhor ainda, use uma folha de estilo externa:

<iframe src="example.html" class="content-frame"></iframe>

.content-frame {
  width: 800.2px;
  height: 602.88px;
}

❌ Inválido: outros caracteres não numéricos

Este erro também pode aparecer se você incluir unidades no valor do atributo:

<iframe src="example.html" width="800px" height="600px"></iframe>

✅ Corrigido: remover as unidades

<iframe src="example.html" width="800" height="600"></iframe>

A mesma regra aplica-se aos elementos <img>, <video>, <canvas> e outros elementos que aceitam width e height como atributos HTML — todos esperam números inteiros não negativos válidos sem decimais ou unidades.