In this section, we will learn what the data-* attribute is and how to use it in HTML.
HTML Custom Attributes: HTML data-* Attribute Definition and Usage
HTML elements have attributes, as you saw throughout these tutorials. Each of these attributes has a specific purpose. For example, one is used for identifying an element (the `id` attribute), another one for changing the style of an element (the style attribute) and so many others that do something on an element.
But in rare cases, we might need an attribute that none of these built-in attributes could handle such a task.
So what should we do then? Well, HTML creators thought about this, and they came up with custom attributes!
A custom attribute is basically an attribute that we create ourselves and assign values to them.
In order to create a custom attribute in HTML, we use this syntax:
The asterisk here is replaced with the name of the custom attribute that we want to create.
For example, if the name of the custom attribute is “finance”, the custom attribute would be `data-finance`.
Also, just like other attributes, we can assign values to custom attributes as well.
<element data-finance = “$1000”>
Basically, depending on the need of the program, we set the necessary data for the target custom attribute.
Note: browsers ignore any custom attribute created via `data-*`.
HTML data-* Attribute Syntax
<element data-* = “value”>