HTML and CSS Reference
In-Depth Information
Overview of Custom Data Attributes
The HTML5 custom data attributes are special attributes that take the following form:
data-<name>="value"
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-
errormessage
.
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'>
<td>Nancy</td>
<td>Davolio</td>
</tr>
<tr id='emp2' data-employeeid='2' data-title='Vice President, Sales'>
<td>Andrew</td>
<td>Fuller</td>
</tr>
...
</table>
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
job title.
