HTML Guides for object
Learn how to identify and fix common HTML validation errors flagged by the W3C Validator — so your pages are standards-compliant and render correctly across every browser. Also check our Accessibility Guides.
According to the HTML Living Standard, the width and height attributes on the <object> element accept only valid non-negative integers — plain numbers representing pixels, such as 600 or 400. The validator expects each character in the value to be a digit (0–9). When it encounters a % sign, it reports “Expected a digit but saw ‘%’ instead.”
This is different from some legacy HTML 4 behavior where certain elements accepted percentage values in dimension attributes. In modern HTML, the <object> element’s dimension attributes are strictly pixel-only. The same restriction applies to elements like <img>, <video>, and <canvas>.
Why this matters
- Standards compliance: Browsers may still render percentage values in these attributes, but the behavior is not defined by the specification and cannot be relied upon across browsers or future versions.
- Predictable rendering: Pixel values in attributes give the browser a concrete intrinsic size for the object, which helps with layout calculations and prevents content reflow as the page loads.
- Accessibility and tooling: Assistive technologies and other tools that parse HTML rely on well-formed attribute values. Invalid values may cause unexpected behavior.
How to fix it
You have two options:
- Use pixel values in the attributes if you know the exact dimensions you need.
- Use CSS if you need percentage-based or responsive sizing. Remove the width and height attributes (or set them to pixel fallback values) and apply CSS width and height properties instead.
When using CSS for 100% height, remember that percentage heights require the parent elements to also have a defined height. This typically means setting height: 100% on html and body as well.
Examples
❌ Invalid: percentage values in attributes
<object data="example.pdf" type="application/pdf" width="100%" height="100%"></object>The validator flags both width="100%" and height="100%" because % is not a digit.
✅ Fixed: pixel values in attributes
<object data="example.pdf" type="application/pdf" width="600" height="400"></object>Plain integer values are valid and give the object a fixed size in pixels.
✅ Fixed: percentage sizing with CSS
<object
data="example.pdf"
type="application/pdf"
style="width: 100%; height: 500px;">
</object>Using inline CSS allows you to mix units freely, including percentages, vh, em, and more.
✅ Fixed: full-page object with CSS
When you need the <object> to fill the entire viewport, use a stylesheet to set heights on the ancestor elements:
<!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>This approach is fully valid, responsive, and gives you much more control over sizing than HTML attributes alone.
The <object> element embeds external resources such as images, videos, PDFs, or other media into a page. The data attribute specifies the URL of the resource, while the type attribute declares its MIME type (e.g., "application/pdf", "image/svg+xml", "video/mp4"). According to the HTML specification, the element must have at least one of these attributes present — without either, the element is meaningless because the browser cannot determine what to fetch or how to render it.
While the validator requires at least one of these attributes, best practice is to include both. Here’s why:
- Without data, the browser has no resource to load.
- Without type, the browser must guess the content type from the server response, which can lead to incorrect rendering or security issues.
- With both, the browser knows exactly what to fetch and how to handle it before the resource even begins downloading, improving performance and reliability.
Including both attributes also benefits accessibility. Assistive technologies use the type attribute to determine how to present the content to users. Without it, screen readers and other tools may not be able to convey useful information about the embedded resource. You should also always provide fallback content inside the <object> element for browsers or devices that cannot render the embedded resource.
Examples
Missing both attributes (triggers the error)
<object width="600" height="400">
<p>Fallback content here.</p>
</object>The validator reports this error because neither data nor type is present. The browser has no information about what this <object> should display.
Missing type attribute (valid but not recommended)
<object data="example.pdf" width="600" height="400">
<p>Your browser does not support PDFs. <a href="example.pdf">Download the PDF</a>.</p>
</object>This passes validation because data is present, but the browser must determine the content type on its own. Adding type is strongly recommended.
Missing data attribute (valid but limited)
<object type="application/pdf" width="600" height="400">
<p>No PDF to display.</p>
</object>This also passes validation since type is present, but without data there is no resource to load. This pattern is uncommon and generally not useful on its own.
Correct: both attributes provided
<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>Correct: embedding an SVG image
<object data="diagram.svg" type="image/svg+xml" width="300" height="200">
<img src="diagram.png" alt="Architecture diagram showing the system components">
</object>This example also demonstrates good fallback practice — if the browser cannot render the SVG via <object>, it falls back to a regular <img> element with descriptive alt text.
Correct: embedding a video
<object data="intro.mp4" type="video/mp4" width="640" height="360">
<p>Your browser cannot play this video. <a href="intro.mp4">Download it instead</a>.</p>
</object>Quick reference of common MIME types
| Resource type | type value |
|---|---|
| PDF document | application/pdf |
| SVG image | image/svg+xml |
| MP4 video | video/mp4 |
| HTML page | text/html |
| Flash (legacy) | application/x-shockwave-flash |
To resolve this validation error, ensure every <object> element includes at least a data or type attribute. For the best results across browsers and assistive technologies, always provide both along with meaningful fallback content inside the element.
Ready to validate your sites?
Start your free trial today.