HTML Guide for object

Bad value “%” for attribute “width” or “height” on element “object”: Expected a digit but saw “%” instead.

Attribute values for width and height on the object element must be a valid integer (pixels), not a percentage.

In HTML5, the width and height attributes for the <object> element must be specified in pixels as an integer value, such as height="500". Using percentage values like height="100%" is not allowed in the attribute according to the HTML living standard and will trigger a validation error. To set a percentage height, use the CSS width and height properties instead.

Correct usage (pixels via attribute):

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

Correct usage (percentage via CSS):

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

Example of a full valid HTML document using CSS for 100% height:

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

Element “object” is missing one or more of the following attributes: “data”, “type”.

<object> elements require both the data and type attributes to be valid according to W3C HTML specifications.

The <object> element is used to embed external resources, such as images, videos, PDFs, or other media—often for plugins or fallback content. The data attribute specifies the resource URL, while the type attribute describes its MIME type (such as "image/svg+xml" for SVG images, or "application/pdf" for PDFs). Supplying both attributes allows browsers and assistive technologies to correctly interpret and display the embedded content, ensuring accessibility and standards compliance.

Correct usage example:

<object data="example.pdf" type="application/pdf" width="600" height="400">
  <p>Your browser does not support PDFs. <a href="example.pdf">Download the PDF</a>.</p>
</object>

Incorrect usage examples (missing attributes):

<!-- Missing type attribute -->
<object data="example.svg"></object>

<!-- Missing data attribute -->
<object type="image/svg+xml"></object>

Corrected example for embedding SVG:

<object data="image.svg" type="image/svg+xml"></object>

To fix validator errors, always include both the data and type attributes in <object>.