HTML Guides for object

The path in an <object> element's data attribute can't contain a literal space, so write each space as %20 or rename the file so its URL has none.

The data attribute holds the URL of the resource the object embeds, often a PDF, and the URL Standard doesn't allow spaces in a path. The validator reports values like /docs/annual report.pdf, and one stray space is enough, as in /docs/fees_ 2025.pdf. Accented letters in a file name are allowed, so only the space needs fixing.

Browsers percent-encode the space when they request the file, so the embedded document usually still shows. The markup is invalid anyway, and a tool that reads the raw value may not encode it. A space after the ? gives a different message, Illegal character in query, and %20 fixes that one too.

When the object has a fallback link to the same file, the link's href gets its own Illegal character in path segment error. Change both values together.

Invalid example

<object data="/docs/annual report.pdf" type="application/pdf" width="600" height="800">

<p><a href="/docs/annual report.pdf">Download the annual report (PDF)</a></p>

</object>

Valid example: space encoded as %20

<object data="/docs/annual%20report.pdf" type="application/pdf" width="600" height="800">

<p><a href="/docs/annual%20report.pdf">Download the annual report (PDF)</a></p>

</object>

Valid example: hyphen instead of a space

<object data="/docs/annual-report.pdf" type="application/pdf" width="600" height="800">

<p><a href="/docs/annual-report.pdf">Download the annual report (PDF)</a></p>

</object>

The height attribute of an <object> takes a number of CSS pixels written as digits only, so a unit such as px in height="800px" makes the value invalid.

The HTML standard defines width and height on <object> as dimension attributes, whose value must be a valid non-negative integer. The validator reads the value from the left and stops at the first character that isn't a digit. In 800px that is the p, and pt or pc stop at the same letter. Other units are reported by their first character (v in 80vh, e in 40em). A percentage such as 100% gets its own error, about the % sign.

Browsers read the leading digits and drop the rest, so height="800px" already renders 800 pixels tall. Deleting the unit leaves the layout as it is. The attribute can only express pixels, though. For a height in viewport units, ems or a percentage of the container, remove the attribute and set the CSS height property instead.

Invalid example

<object data="/docs/annual-report.pdf" type="application/pdf" width="600" height="800px"></object>

Valid example

<object data="/docs/annual-report.pdf" type="application/pdf" width="600" height="800"></object>

To size the object relative to the viewport, use CSS:

<object data="/docs/annual-report.pdf" type="application/pdf" style="width: 100%; height: 80vh;"></object>

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:

1. Use pixel values in the attributes if you know the exact dimensions you need.
2. 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

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.

The classid attribute told the browser which plugin or ActiveX control should run an <object>, and HTML has dropped it: the resource URL goes in data and its MIME type in type.

Its value was usually clsid: followed by the ID of an ActiveX control, and only Internet Explorer could load those. A typical one is clsid:D27CDB6E-AE6D-11cf-96B8-444553540000, the Flash Player control. Flash embed code usually pairs it with a codebase attribute pointing to the Flash installer, a list of <param> elements naming the .swf file and its settings, and a nested <embed> for other browsers.

Browsers no longer look at classid. An <object> loads the URL in its data attribute, and when data is missing it renders the content between its tags instead. For a Flash embed, that content is the <param> elements, which display nothing, and the <embed>, whose .swf won't play. The validator also reports the missing data as an error next to this warning.

The message still mentions plugins, but current browsers don't run any, and Adobe ended support for Flash Player on December 31, 2020. Moving the .swf URL into data with type="application/x-shockwave-flash" clears the warning, but the box on the page stays empty. Replace the content itself: a video file goes in <video>, a video on a hosting service goes in that service's <iframe> player, and a banner can become an <img> or a short video. Then delete the old <object>, its <param> and <embed> elements included.

When the <object> holds a file that browsers handle without a plugin, such as a PDF or an SVG image, keep the element and remove classid. Point data at the file and set type to its MIME type (application/pdf or image/svg+xml). Anything inside the element, like a download link, shows up when the browser can't display the file.

Examples

Invalid: a Flash embed

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="360">

<param name="movie" value="intro.swf">

<embed src="intro.swf" type="application/x-shockwave-flash" width="640" height="360">

</object>

Valid: the Flash movie converted to a video

<video src="intro.mp4" controls width="640" height="360"></video>

Invalid: classid left on a PDF embed

<object classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" data="report.pdf" width="600" height="400">

<a href="report.pdf">Download the report (PDF)</a>

</object>

Valid: data and type only

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

<a href="report.pdf">Download the report (PDF)</a>

</object>

The codebase attribute told the browser where to get the code an <object> needed, and browsers ignore it today: the resource URL goes in data and its MIME type in type.

In Flash embed code, codebase holds the address of the Flash Player installer for Internet Explorer, a swflash.cab file on Macromedia's download server, followed by a fragment such as #version=10,0,0,0. Internet Explorer compared that version with the ActiveX control installed on the computer and, when the control was missing or older, offered to download and install the .cab file. Other ActiveX controls, like the ones for QuickTime and Windows Media Player, came with their own .cab URLs in the same attribute.

HTML 4.01 gave codebase a second job: a base path for relative URLs in the classid, data and archive attributes. With codebase="/media/" and data="intro.swf", the file was meant to load from /media/intro.swf. Browsers now resolve data against the page's URL like any other link, and none of them download installers from codebase.

Deleting the attribute clears this warning without changing what the page shows, since browsers already skip it. For Flash embed code, that isn't enough: the classid warning stays, the validator still reports the missing data attribute and the obsolete <param> elements, and the box stays empty because no current browser plays .swf files. Replace the whole <object>, <param> and <embed> elements included, with the same content in a format browsers support, such as a <video> for a movie or an <img> for a static banner.

If the page relied on codebase as a base path, browsers already request the file from the wrong address. Write the full path into data, then remove codebase.

Examples

Invalid: Flash embed code with a .cab installer

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="https://example.com/cabs/flash/swflash.cab#version=10,0,0,0" width="640" height="360">

<param name="movie" value="intro.swf">

<embed src="intro.swf" type="application/x-shockwave-flash" width="640" height="360">

</object>

Valid: the movie as a video

<video src="intro.mp4" controls width="640" height="360"></video>

Invalid: codebase as a base path for data

<object codebase="/files/reports/" data="annual-report.pdf" type="application/pdf" width="600" height="400">

<a href="/files/reports/annual-report.pdf">Download the annual report (PDF)</a>

</object>

Valid: the full path in data

<object data="/files/reports/annual-report.pdf" type="application/pdf" width="600" height="400">

<a href="/files/reports/annual-report.pdf">Download the annual report (PDF)</a>

</object>

The <param> element is obsolete in HTML5 and should no longer be used inside <object> elements.

The <param> element was originally used to pass named parameters to plugins embedded via <object>, such as Flash, Java applets, or Windows Media Player. Since modern browsers have dropped support for these plugins, the <param> element lost its purpose and was removed from the HTML living standard.

If the <object> element references an external resource like a video, PDF, or image, the resource URL belongs in the data attribute of the <object> element itself. The type attribute should specify the MIME type of the resource.

For media playback, the <video> and <audio> elements are the standard replacements. For other embedded content, <iframe> or <embed> may be more appropriate depending on the use case.

HTML examples

Before: obsolete param element

<object>

<param name="movie" value="video.mp4">

<param name="autoplay" value="true">

</object>

After: using the data attribute on object

<object data="video.mp4" type="video/mp4">

<p>Your browser does not support this content.</p>

</object>

After: using video for media playback

<video src="video.mp4" controls>

<p>Your browser does not support this video.</p>

</video>