HTML and CSS Reference
Overview of Custom Data Attributes
The HTML5 custom data attributes are special attributes that take the following form:
Custom data attributes always begin with data- followed by a developer-defined name. For example,
for the custom validation scenario discussed earlier, you can create a custom data attribute named data-
The developer-defined name can contain a hyphen ( - ). For example, data-customer-id and data-
customer-name are valid custom data attributes. Custom data attributes are also referred as data-*
attributes due to the naming convention they follow. A data-* attribute can be assigned a value just like
any other HTML attribute. ASP.NET uses data-* attributes extensively to provide unobstructive validation
in web forms and MVC applications.
n Note Unobstructive validation is a technique implemented by ASP.NET that uses data annotation attributes and
jQuery. Under this scheme, a data model is decorated with data-annotation attributes that perform validations on the
data-model property values. At runtime, ASP.NET emits data-* attributes based on these data-annotation attributes.
The client-side validations are performed with the help of these data-* attributes and jQuery.
Unlike standard HTML attributes, data-* attributes don't affect the visual look and feel of the element.
In fact, the browser doesn't use them automatically for any purpose. You need to programmatically access
them and execute the intended logic on them. An HTML element can have any number of data-*
attributes defined on it.
Although you can use data-* attributes for any custom requirement, you should avoid using them if
the same purpose can be accomplished with a standard HTML attribute. For example, suppose you wish
to display a tooltip for an element when the user hovers the mouse pointer on it. The tooltip changes
based on programmatic conditions. In this case, it's better to use the HTML title attribute rather than
create a new data-* attribute.
Listing 6-12 shows some sample HTML markup that uses custom data attributes.
Listing 6-12. Using Custom Data Attributes
<table border="1" cellpadding="3">
<tr id='emp1' data-employeeid='1' data-title='Sales Representative'>
<tr id='emp2' data-employeeid='2' data-title='Vice President, Sales'>
This listing shows an HTML table containing employee data. Each table row contains the name of the
employee and additionally has two custom data attributes: data-employeeid and data-title . The data-
employeeid attribute stores the employee's EmployeeID , and the data-title attribute stores the employee's