HTML Data Attribute

What is the HTML data Attribute?

The data attribute is used to specify the URL of a resource to be used by the object element. It is used in the form of data="url", where url is the URL of the resource.

Applicable Elements

The data attribute can be used with the following elements:

• <object>

HTML <object> data Attribute

The <object> element is a container used to embed an external resource. The resource can be an image, nested HTML, PDF, Video, a resource handled by a plugin, and more.

The data attribute, when used with the <object> element, specifies the URL of the resource.

Syntax

<object 
  data="https://www.thewebmaster.com/"
  type="text/html">
</object>

Usage

• The data attribute should contain a valid URL linking to the resource you wish to embed in the <object> element.
• At least one data attribute must be specified.
• The data attribute must be used with the type attribute to specify the MIME type of the resource.

Values

Values can include:

• A valid absolute or relative URL.

Examples

How to embed an image using the <object> element and data attribute

To use the data attribute with the object element to embed an image:

• Set the data attribute to the URL of the image file.
• Set the type attribute to the MIME type of the image file. For example, image/webp for a webp image, image/png for a PNG image, image/jpeg for a JPEG image, or image/gif for a GIF image.

<!--Embed an image:-->
<object
  data="https://res.cloudinary.com/thewebmaster/image/upload/images/html/data-attribute-demo-image.webp"
  type="image/webp">
  <img
    src="https://res.cloudinary.com/thewebmaster/image/upload/images/html/data-attribute-demo-image.jpg"
    alt="image">
</object>

Some things to note:

• If the browser supports the object element and the specified resource type, it will embed the image file at the specified URL into the HTML page.
• If the browser does not support the object element or the specified resource type, it will display the img element inside the object element as fallback content. The img element will display the image at the specified URL.
• Some web browsers may block embedding specific image files due to security or privacy concerns. It is also a good idea to provide fallback content in the form of a link to the image file or to use the img element as an alternative to the object element for image embedding.

How to embed a webpage using the data attribute with the <object> element

To use the data attribute with the object element to embed a webpage:

• Set the data attribute to the URL of the webpage.
• Set the type attribute to text/html to indicate that the resource is an HTML webpage.

Here’s an example:

<!--Embed an HTML page:-->
<object data="https://www.thewebmaster.com/" 
  type="text/html"
  width="500" 
  height="200">
  <p>The resource is not available or offline.</p>
</object>

Some things to note:

• The data attribute can be used with the width and height attributes to specify the width and height of the embedded webpage.
• If the browser supports the object element and the specified resource type, it will embed the webpage at the specified URL into the HTML page.
• If the browser does not support the object element or the specified resource type, it will display the content inside the object element as fallback content.
• Some web browsers may block the embedding of certain websites due to security or privacy concerns.

Since all modern browsers support the object element, the fallback content is rarely displayed. However, we find it useful to include the fallback in case the resource is unavailable; for example, if the site is offline.

How to embed a video using the data attribute with the <object> element

To use the data attribute with the object element to embed a video:

• Set the data attribute to the URL of the video file.
• Set the type attribute to the MIME type of the video file. For example, video/mp4 for an MP4 video, video/ogg for an Ogg video, or video/webm for a WebM video.

Here’s an example:

<!--Embed a movie file:-->
<object data="https://upload.wikimedia.org/wikipedia/en/8/8d/Bond%2C_James_Bond.webm"
  type="video/webm"
  width="408"
  height="244"></object>

Some things to note:

• The data attribute can be used with the width and height attributes to specify the width and height of the video.
• If the browser supports the object element and the specified resource type, it will embed the video file at the specified URL into the HTML page.
• If the browser does not support the object element or the specified resource type, it will display the content inside the object element as fallback content. In this case, the fallback content would be the message “Your browser does not support the object element.”
• Some web browsers may block the embedding of certain video files due to security or privacy concerns. It is also a good idea to provide fallback content in the form of a link to the video file or to use the video element as an alternative to the object element for video embedding.

Specification

The data HTML specification for the <object> element is as follows:

• HTML Living Standard Specification

Browser Support

The data attribute is supported by all modern web browsers and has been a part of the HTML specification since HTML5.

It has the following browser support:

Desktop

Mobile