HTML and CSS Reference
FIGURE 4.6 The script
superimposes the caption
over the video as delectable
The data-* attributes (custom data attributes)
HTML5 allows custom attributes on any element. These can be used to pass information to local scripts.
Previously, to store custom data in your markup, authors would do something annoying like use classes:
<input class=”spaceship shields-5 lives-3 energy-75”> . Then your script would need to
waste time grabbing these class names, such as shields-5 , splitting them at a delimiter (a hyphen in this
Koch explains how to do this and why he elected to use custom attributes in some HTML4 pages, making
to use data-shields=5 for passing name/value pairs to scripts, HTML5 legitimises and standardises this
useful, real-world practice.
We're using data-begin and data-end ; they could just as legitimately be data-start and data-finish ,
or (in a different genre of video) data-ooh-matron and data-slapandtickle . Like choosing class or id
names, you should pick a name that matches the semantics.
Custom data attributes are only meant for passing information to the site's own scripts, for which there are
no more appropriate attributes or elements.
The spec says “These attributes are not intended for use by software that is independent of the site that
uses the attributes” and are therefore not intended to pass information to crawlers or third-party parsers.
That's a job for microformats, microdata, or RDFa.
element.dataset.foo (where the data-foo attribute contains the value). Support can be emulated
and below, which you can see here: http://gist.github.com/362081 . Otherwise scripts can access the val-
ues via the get / setAttribute methods. The advantage of the dataset property over setAttribute is
that it can be enumerated, but also, when fully implemented in browsers, setting a dataset attribute auto-
matically sets the content attribute on the element giving you a shorthand syntax for setting custom data.
For more information, see the spec http://dev.w3.org/html5/spec/Overview.html#custom-data-attribute .