Validación HTML: Valor incorrecto "%" para el atributo "width" o "height" en el elemento "object": Se esperaba un dígito pero se encontró "%" en su lugar.

Acerca de este problema HTML

Según el HTML Living Standard, los atributos width y height en el elemento <object> aceptan únicamente enteros no negativos válidos — números simples que representan píxeles, como 600 o 400. El validador espera que cada carácter en el valor sea un dígito (0–9). Cuando encuentra un signo %, reporta “Se esperaba un dígito pero se encontró ‘%’ en su lugar.”

Esto es diferente del comportamiento de HTML 4 heredado donde ciertos elementos aceptaban valores de porcentaje en atributos de dimensión. En HTML moderno, los atributos de dimensión del elemento <object> son estrictamente solo píxeles. La misma restricción se aplica a elementos como <img>, <video> y <canvas>.

Por qué esto importa

Cumplimiento de estándares: Los navegadores pueden seguir renderizando valores de porcentaje en estos atributos, pero el comportamiento no está definido por la especificación y no se puede confiar en él entre navegadores o versiones futuras.
Renderizado predecible: Los valores en píxeles en atributos dan al navegador un tamaño intrínseco concreto para el objeto, lo que ayuda con los cálculos de diseño y previene el reflujo de contenido mientras se carga la página.
Accesibilidad y herramientas: Las tecnologías de asistencia y otras herramientas que analizan HTML dependen de valores de atributo bien formados. Los valores inválidos pueden causar comportamiento inesperado.

Cómo solucionarlo

Tienes dos opciones:

Usa valores en píxeles en los atributos si conoces las dimensiones exactas que necesitas.
Usa CSS si necesitas dimensionado basado en porcentajes o responsivo. Elimina los atributos width y height (o establécelos con valores de respaldo en píxeles) y aplica las propiedades CSS width y height en su lugar.

Al usar CSS para altura al 100%, recuerda que las alturas en porcentaje requieren que los elementos padre también tengan una altura definida. Esto típicamente significa establecer height: 100% en html y body también.

Ejemplos

❌ Inválido: valores de porcentaje en atributos

<object data="example.pdf" type="application/pdf" width="100%" height="100%"></object>

El validador marca tanto width="100%" como height="100%" porque % no es un dígito.

✅ Corregido: valores en píxeles en atributos

<object data="example.pdf" type="application/pdf" width="600" height="400"></object>

Los valores enteros simples son válidos y dan al objeto un tamaño fijo en píxeles.

✅ Corregido: dimensionado con porcentajes usando CSS

<object
  data="example.pdf"
  type="application/pdf"
  style="width: 100%; height: 500px;">
</object>

Usar CSS en línea te permite mezclar unidades libremente, incluyendo porcentajes, vh, em, y más.

✅ Corregido: objeto de página completa con CSS

Cuando necesitas que el <object> llene toda la ventana gráfica, usa una hoja de estilo para establecer alturas en los elementos ancestro:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Full-Page Object Example</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
    }
    object {
      display: block;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <object data="example.pdf" type="application/pdf"></object>
</body>
</html>

Este enfoque es completamente válido, responsivo, y te da mucho más control sobre el dimensionado que los atributos HTML por sí solos.