HTML data Attribute
The HTML data Attribute is used to specify the URL of the Embedded file of the Object. It can be used with the <object> element.
Syntax:
<object data="URL">Attribute Values: It contains a single value URL which is used to specify the source of the object.
The possible values of URL are:
- absolute URL: It points to another website.
- relative URL: It points to a file within a website.
Example: This Example illustrates the use of the data Attribute.
<!DOCTYPE html>
<html>
<head>
<title>HTML data Attribute</title>
</head>
<body>
<center>
<h1>HTML data Attribute</h1>
<br>
</center>
<object data=
"https://www.geeksforgeeks.org/wp-content/uploads/Geek_logi_-low_res.png"
width="550px"
height="150px">
GeeksforGeeks
</object>
</body>
</html>
Output:
Supported Browsers: The browser supported by HTML data Attribute are listed below:
HTML data Attribute – FAQs
How do you define a custom data attribute in HTML?
Custom data attributes are defined using the data-* syntax. For example, <div data-user-id=”12345″>User Information</div> sets a custom attribute data-user-id with the value 12345.
How do you access the value of a data attribute in JavaScript?
You can access data attribute values in JavaScript using the dataset property. For example, document.querySelector(‘div’).dataset.userId retrieves the value 12345 from data-user-id.
What are the use cases for the data attribute in HTML?
The data attribute is commonly used to store custom data that isn’t visible to users but needed for JavaScript interactions, such as identifiers, configuration values, or states for dynamic content.
Can the data attribute be used with any HTML element?
Yes, the data attribute can be added to any HTML element, providing flexibility to store custom data wherever needed.
What are the rules for naming a data attribute?
The name of a data attribute must start with “data-” followed by a name containing only letters, digits, dashes (-), periods (.), underscores (_), or colons (:). For example, data-user-id or data-item.name.
