HTML and CSS Reference
In-Depth Information
FIGURE 4.6 The script
superimposes the caption
over the video as delectable
selectable text.
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
example) to extract the value. In his book, PPK on JavaScript (New Riders, ISBN 0321423305), Peter Paul
Koch explains how to do this and why he elected to use custom attributes in some HTML4 pages, making
the JavaScript leaner and easier to write but also making the page technically invalid. As it's much easier
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.
When the data-* attributes are fully supported in a browser, JavaScript can access the properties using (where the data-foo attribute contains the value). Support can be emulated
using JavaScript by extending the HTMLElement object, which typically isn't possible in IE9 alpha release
and below, which you can see here: . 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 .
Search WWH ::

Custom Search