HTML and CSS Reference
In-Depth Information
Discussion
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
allowed.
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.
See Also
HTML5 Doctor's discussion about custom data attributes at
http://html5doctor.com/
