Custom data attributes in HTML, also known as data-\*, allows you to store extra information or data in your HTML tags. They are used to store custom data private to the web page or application. They give us the ability to embed custom data attributes on all HTML elements.
Here is how to use them:
1. Insert the custom data: To add a custom data attribute, you typically begin it with “data-” and then follow it with your preferred name.
For example:
```
In this case, `custom-name` is the custom data attribute name and `myvalue` is its value.
1. Access the custom data with JavaScript: JavaScript’s `dataset` property can be used to read the custom data.
For example:
```
var div = document.getElementById(“example”);
var customNameValue = div.dataset.customName;
```
In this case, `dataset.customName` is used to get the value of the custom data attribute `data-custom-name`.
1. Access the custom data with jQuery: jQuery’s `data()` method can be used to read the custom data attribute.
For example:
```
var customNameValue = $(“#example”).data(“custom-name”);
```
In this case, `.data(“custom-name”)` is used to get the value of the custom data attribute `data-custom-name`.
1. Modify the custom data: Same methods can be used to modify the data.
For instance:
```
div.dataset.customName = “newvalue”; // JavaScript
$(“#example”).data(“custom-name”, “newvalue”); // jQuery
```
In these cases, the value of `data-custom-name` is changed to `newvalue`.
