Valor inválido “Xpx” para o atributo “width | height” no elemento “img | iframe”: esperava-se um dígito mas encontrou-se “p”.

Em HTML, os atributos width e height em elementos como <img> e <iframe> são definidos como aceitando apenas números inteiros não negativos válidos. De acordo com a especificação HTML, o valor está implicitamente em pixels CSS, pelo que adicionar px ou qualquer outra unidade é desnecessário e inválido. O analisador espera que cada carácter no valor seja um dígito (0–9), e quando encontra uma letra como p, reporta o erro.

Este é um erro comum, especialmente para programadores que trabalham frequentemente com CSS, onde as unidades px são obrigatórias. Nos atributos HTML, contudo, a convenção é diferente — a unidade de pixel está implícita, e adicioná-la cria um valor malformado. Os navegadores podem ainda tentar analisar o número ignorando os caracteres finais, mas este comportamento não é garantido e não deve ser considerado confiável.

Obter estes atributos corretos é importante por várias razões:

• Conformidade com padrões garante que a sua marcação é previsível e portável em todos os navegadores e agentes de utilizador.
• Estabilidade de layout depende do navegador ler corretamente width e height para reservar espaço para imagens e iframes antes de carregarem, prevenindo mudanças cumulativas de layout (CLS). Um valor malformado pode fazer com que o navegador recorra ao dimensionamento padrão ou ignore completamente o atributo.
• Ferramentas de acessibilidade e leitores de ecrã podem usar estes atributos para transmitir informação sobre conteúdo incorporado, e valores inválidos podem interferir com esse processo.

Se precisar de definir dimensões usando unidades diferentes de pixels (como percentagens ou unidades de viewport), use CSS em vez de atributos HTML.

Exemplos

❌ Inválido: usar px no valor do atributo

<img src="cat.jpg" alt="A cat sitting on a windowsill" width="225px" height="100px">

O validador reporta um erro porque 225px e 100px contêm os caracteres não-dígitos px.

✅ Válido: números inteiros simples sem unidades

<img src="cat.jpg" alt="A cat sitting on a windowsill" width="225" height="100">

❌ Inválido: usar percentagem no valor do atributo

<iframe src="embed.html" width="100%" height="400px" title="Embedded content"></iframe>

Tanto 100% como 400px são inválidos porque contêm caracteres não-dígitos.

✅ Válido: números inteiros simples num <iframe>

<iframe src="embed.html" width="800" height="400" title="Embedded content"></iframe>

✅ Usar CSS quando você precisa de unidades não-pixel

Se precisar de dimensionamento baseado em percentagem ou responsivo, aplique-o através de CSS em vez de atributos HTML:

<iframe src="embed.html" style="width: 100%; height: 400px;" title="Embedded content"></iframe>

Ou ainda melhor, use uma folha de estilo externa:

<style>
  .responsive-frame {
    width: 100%;
    height: 400px;
  }
</style>
<iframe src="embed.html" class="responsive-frame" title="Embedded content"></iframe>

Referência rápida de valores inválidos vs. válidos

A correção é simples: remova quaisquer sufixos de unidade dos atributos HTML width e height e forneça valores inteiros simples. Para qualquer coisa além de dimensões simples em pixels, mova a sua lógica de dimensionamento para CSS.

Saiba mais:

MDN Reference

HTML img element - width and height attributes

→

MDN Reference

HTML iframe element

→

web.dev Article

Images in HTML

→