HTML data attributes are one of the neat features of HTML5 that give us a lot of flexibility.

We can use them for a variety of things (and abused for just as much), but the general idea behind the attribute, according to MDN, is this:
HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM, or setUserData.
Yes, it reads a bit long. Consider it like this, though:
Data attributes provide a way to save extra information about an element in a semantic way without using conventional hacks (that so many of us are used to using).
Though there are a variety of ways in which this attribute can be used, I’ve found it to be useful when working with a front-end element that’s part of a dynamic set of larger elements.
Further, any one of these elements will be used via JavaScript to send data to the server via Ajax.
Here’s a simple example of how to use the HTML data attributes and Ajax.



