HTML and CSS Reference
Since not everyone cares about VWs or cars, there's a lot of detail we need not provide—
like the year, color, and engine type of each VW. With custom data attributes, we can
include such extraneous data in the markup without requiring readers to look at it.
The data is now stored in the HTML; read the subsequent recipes in
this chapter to learn what else you can do with this data.
In order to store the year, color, and engine type of each car, in this example we created
three custom data attributes: data-year , data-color , and data-engine .
As you can see, they all start with data- followed by at least one character. The name
you define may not include uppercase letters, but it can include hyphens. You could,
for example, define a data-model-year attribute, but data-modelYear would not be
If your custom data attributes have additional hyphens in the name, you
need to convert them to camel case names when using the dataset API—
for example, data-foo-bar would be referred to as dataset.fooBar . But
if you're using getAttribute() or setAttribute() , you will still
reference it as data-foo-bar .
Even though we use the three custom attributes consistently in this example, we haven't
created any special relationships by using them together—for example, we could list
another car and apply only a data-color attribute, or we could go on to list airplanes
that we've flown and reuse the data-engine attribute. It's up to you, the programmer,
to maintain structure or define the namespace you need for your website or application.
HTML5 Doctor's discussion about custom data attributes at http://html5doctor.com/