CSS Portal

HTML data Attribute

If this site has been useful, we’d love your support! 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

Example

<object data="images/earth.mp4" type="video/mp4">
Your browser does not support the video tag.
</object>

Browser Support

The following information will show you the current browser support for the HTML data attribute. Hover over a browser icon to see the version that first introduced support for this HTML attribute.

This attribute is supported by all modern browsers.
Desktop
Chrome
Edge
Firefox
Opera
Safari
Tablets & Mobile
Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-

Last updated by CSSPortal on: 28th March 2024

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!