Html5 Custom Attributes

Many a times we need to store/require additional data from HTML elements for parsing or performing some operations.
This can be achieved using a class or rel attributes that traditional HTML provides. But it can take a lot of effort and tedious JavaScript code to get the such extra data from these HTML elements.

What is Html5 Custom Attributes

Html5 Custom Attributes are data attributes used to store custom/additional data for the HTML element.

Rules to define Custom Attributes
1. The attribute name should start with data-
2. The attribute name should contain atleast one letter word after data-
3. The attribute name should be in lowercase.
4. The attribute value can be any string.

Getting Data stored in the Custom Attributes


Use of HTM5 Custom Attributes in Select box

In a select box, the HTML5 custom attributes can be useful in storing extra data, which can be used later whenever a change event is triggered on the select box.

E.g If a select box has a list of employees and we need to get the details of the selected employee i.e. manager and department , traditional way to do is to get the employee id and make a ajax call to the server to get data.

But using the HTML5 custom attributes we can store the extra data in the element itself and use when required.