HTML data Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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:

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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
Edge Chrome Firefox Opera Safari
1211153
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18414214.4

Last updated by CSSPortal on: 28th March 2024