HTML data Attribute

Description

The HTML data attribute used with the <object> tag provides a way to embed custom data within an HTML object element. This attribute allows developers to associate additional information with the object, which can be accessed and utilized via JavaScript or other scripting languages.

Here's a breakdown of how the data attribute works with the <object> tag:

Purpose: The primary purpose of the data attribute is to specify the URL of the resource to be embedded within the object element. This resource could be an image, a video, an audio file, a document, or any other type of content supported by the browser.
Custom Data: In addition to specifying the URL of the embedded resource, the data attribute can also be used to include custom data associated with the object. This data can be in the form of key-value pairs and can contain any relevant information that developers want to attach to the object.
Accessibility: The data attribute can be particularly useful for enhancing the accessibility of embedded objects. Developers can include metadata or descriptive information as part of the custom data, making it easier for assistive technologies to interpret and present the content to users with disabilities.
Dynamic Content: Since the data attribute can be manipulated dynamically using JavaScript, developers have the flexibility to modify or update the embedded content and associated data based on user interactions or other events in the web application.

Usage Example:

<object data="embedded_content.pdf" type="application/pdf" width="500" height="600" data-custom1="value1" data-custom2="value2">
    <!-- Fallback content -->
    <p>Embedded content could not be displayed.</p>
</object>

In this example, the <object> tag embeds a PDF document specified by the data attribute. Additionally, custom data attributes (data-custom1 and data-custom2) are included to associate extra information with the object.

Syntax

<object data="URL">

Values

URLA URL that specifies the location of the object's data.

Applies To

The data attribute can be used on the following html elements.

<object>

Example

HTML

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

  Your browser does not support the video tag.

</object>

Result

Editor

Browser Support

The following table will show you the current browser support for the HTML data Attribute.

Desktop

12	1	1	15	3

Tablets / Mobile

18	4	14	2	1	4.4

Last updated by CSSPortal on: 28th March 2024

Support Us