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.
Example
<object data="images/earth.mp4" type="video/mp4">
Your browser does not support the video tag.
</object>
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