HTML data Attribute

HTML data Attribute

The HTML data attribute specifies the URL of the resource to be loaded by an <object> element. The resource can be a document, image, or another type of content that the browser is able to handle.

Syntax

The data attribute is specified on an <object> element and contains the URL of the resource to load.

<object data="document.html">
  Fallback content
</object>

If the resource can be loaded and displayed, it is rendered by the <object> element.

Attribute Value

The value of the data attribute is a URL identifying the resource used by the <object> element.

Elements That Use the data Attribute

The data attribute applies to the <object> element.

Relative and Absolute URLs

The data attribute can use a relative or absolute URL.

<!-- Relative URL -->
<object data="documents/example.html"></object>

<!-- Absolute URL -->
<object data="https://www.example.com/example.html"></object>

A relative URL is resolved against the document's base URL, while an absolute URL identifies the complete location of the resource.

Using data with type

The type attribute can be used with data to specify the expected MIME type of the resource.

<object data="example.svg" type="image/svg+xml">
  Your browser cannot display this resource.
</object>

The data attribute identifies the resource, while type provides information about its media type.

Fallback Content

Content placed between the opening and closing <object> tags can provide an alternative when the external resource cannot be used.

<object data="example.svg" type="image/svg+xml">
  <p>The resource could not be displayed.</p>
</object>

Providing useful fallback content can help users when the resource is unavailable or unsupported.

data and data-* Attributes

Do not confuse the data attribute with custom data-* attributes. They serve completely different purposes.

<object data="example.svg"></object>

<div data-category="tutorial">HTML Tutorial</div>

Common Mistakes

Do not use the data attribute as a general-purpose custom data attribute. Custom information should use attributes beginning with data-.

Make sure the URL points to a resource the browser can load and handle. An invalid or unavailable URL can prevent the intended resource from being displayed.

Do not confuse the data attribute on <object> with the src attribute used by elements such as <img>, <script>, and <iframe>.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The data attribute on the <object> element is widely supported in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the data Attribute

The example uses the data attribute to load an HTML document into an <object> element.

Summary

The HTML data attribute specifies the URL of the resource represented by an <object> element. It accepts a relative or absolute URL and can be used with the type attribute to identify the resource's MIME type. The data attribute is unrelated to custom data-* attributes.