HTML data-* Global Attribute

Description

The data-* global attribute in HTML allows you to store custom data private to the page or application. The attribute name must start with data- and can be followed by any valid XML name. The attribute value can be any string.

The data-* attributes are not specified in the HTML standard, but they are supported by all major browsers. This makes them a useful way to store data that you need to access from JavaScript, but that you don't want to expose to the user or to other websites.

Here are some examples of how to use the data-* attribute:

<div data-product-id="1234567890" data-product-name="My Product">
  <h1>My Product</h1>
</div>

<button data-action="submit-form">Submit Form</button>

<img data-src="https://example.com/image.png" alt="Image">

In the first example, we are using the data-* attribute to store the product ID and name. This data can then be accessed from JavaScript to populate the page with dynamic content.

In the second example, we are using the data-* attribute to store the action that the button should perform when it is clicked. This data can then be read by JavaScript and used to submit the form.

In the third example, we are using the data-* attribute to store the source of the image. This data can then be used by JavaScript to load the image dynamically.

The data-* attributes can be used to store any type of data that you need to access from JavaScript. This makes them a very versatile tool for web development.

Here are some tips for using the data-* attribute:

Use descriptive names for your data-* attributes. This will make it easier to understand what the data is and how it is being used.
Avoid using the data-* attribute to store data that is sensitive or private. If you need to store this type of data, you should use a more secure method, such as encryption.
Be aware that the data-* attributes are not validated by the browser. This means that you need to make sure that the data is valid before using it in JavaScript.

Overall, the data-* global attribute is a powerful tool that can be used to store custom data in HTML. This data can then be accessed from JavaScript to create more dynamic and interactive web pages.

Syntax

<element data-*="value">

Values

*This value must not contain capital letters, and must also contain at least one character after the prefix data-. The attribute value can be any string.
valueThis value represents the data that is stored.

Example

HTML

<!DOCTYPE html>

<html>

<head>

<title>Data Global Attribute</title>

</head>

<body>

<p id="test">Click on an item for details:</p>

<script>

function showDetails(test) {

var testType = test.getAttribute("data-test");

alert(test.innerHTML + " is a " + testType + "."); 

}

</script>

<ul>

<li onclick="showDetails(this)"data-test="star">The Sun</li>

<li onclick="showDetails(this)"data-test="satellite">The Moon</li>

<li onclick="showDetails(this)"data-test="planet">Mercury</li>

</ul>

</body>

</html>