Validación HTML: Valor incorrecto X para el atributo "(width | height)" en el elemento "iframe": Se esperaba un dígito pero se encontró "." en su lugar.

Acerca de este problema HTML

Según la especificación HTML, los atributos width y height en elementos <iframe> aceptan únicamente un entero no negativo válido — una cadena de uno o más dígitos ASCII (0–9) sin puntos decimales, espacios o sufijos de unidades como px. Esto es diferente de CSS, donde propiedades como width y height aceptan valores decimales y unidades. Los atributos HTML representan dimensiones en píxeles CSS de forma implícita, por lo que solo se permiten números enteros sin más.

Cuando el validador W3C reporta “Se esperaba un dígito pero se encontró ‘.’ en su lugar”, significa que estaba analizando el valor del atributo carácter por carácter y encontró un punto (.) donde solo son válidos los dígitos. Esto suele suceder cuando los desarrolladores copian valores calculados o fraccionarios desde herramientas de diseño, cálculos JavaScript o CSS en atributos HTML.

Por qué es importante

Cumplimiento de estándares: Los navegadores pueden manejar valores de atributos inválidos de manera inconsistente. Aunque la mayoría de navegadores modernos analizarán y truncarán valores decimales de forma adecuada, el comportamiento no está garantizado y está fuera de la especificación.
Renderizado predecible: Depender de cómo los navegadores manejan valores malformados puede llevar a diferencias sutiles entre motores de navegador. Usar enteros válidos asegura un comportamiento consistente en todas partes.
Calidad del código: Un marcado limpio y válido es más fácil de mantener y señala profesionalidad, lo cual es especialmente importante para bases de código compartidas y proyectos colaborativos.

Cómo solucionarlo

Redondea el valor al número entero más cercano. Usa reglas de redondeo estándar: redondea hacia arriba si la parte decimal es .5 o mayor, redondea hacia abajo en caso contrario.
Elimina cualquier punto decimal y dígitos posteriores del valor del atributo.
Si necesitas dimensiones precisas y fraccionarias, usa CSS en lugar de atributos HTML. Las propiedades CSS width y height aceptan valores decimales con unidades (ej. 602.88px).

Ejemplos

❌ Incorrecto: valores decimales en `width` y `height`

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

El validador marcará ambos atributos porque 602.88 y 800.2 contienen un carácter ..

✅ Corregido: valores de números enteros

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

Los valores decimales han sido redondeados al entero más cercano: 602.88 se convierte en 603, y 800.2 se convierte en 800.

✅ Alternativa: usar CSS para dimensiones precisas

Si necesitas dimensiones fraccionarias exactas, mueve el dimensionado a CSS y elimina los atributos HTML completamente:

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

O, mejor aún, usa una hoja de estilos externa:

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

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

❌ Incorrecto: otros caracteres que no son dígitos

Este error también puede aparecer si incluyes unidades en el valor del atributo:

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

✅ Corregido: eliminar las unidades

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

La misma regla se aplica a los elementos <img>, <video>, <canvas> y otros elementos que aceptan width y height como atributos HTML — todos esperan enteros no negativos válidos sin decimales o unidades.