Site icon Sir Codex

How to Use HTML5 Data Attributes

Sir Codex
Back in the old XHTML/HTML4 days, developers had few options when storing arbitrary data associated with the DOM. You could invent your own attributes but that was risky; your code would be invalid, browsers could ignore the data, and it would cause problems if the name ever became a standard HTML attribute.

Therefore, most developers relied on the class or rel attributes since these were the only ones which permitted reasonably flexible strings. For example, presume we were creating a widget for displaying messages such as Twitter timelines. Ideally, the JavaScript should be configurable without changing its code — so we define the user’s ID in the class attribute, e.g.

1
<div id="msglist" class="user_bob"></div>

Our JavaScript code would look for an element with the ID msglist. A little string parsing would find a class starting with user_, assume “bob” is the ID and display all messages from that user.

Say we then wanted to define a maximum number of messages and ignore those older than six months (180 days):

1
<div id="msglist" class="user_bob list-size_5 maxage_180"></div>

Our class attribute has become increasingly cumbersome; it’s easy to make errors and JavaScript parsing is more complex.

HTML5 data Attributes

Fortunately, HTML5 introduces custom data attributes. You can use any lowercase name prefixed with data-, e.g.

1
<div id="msglist" data-user="bob" data-list-size="5" data-maxage="180"></div>

Custom data attributes:

  • are strings — you can store anything which can be string encoded, such as JSON. Type conversion must be handled in JavaScript.
  • should only be used when no suitable HTML5 element or attribute exists.
  • are private to the page. Unlike microformats, they should be ignored by external systems such as search engine indexing bots.

JavaScript Parsing #1: getAttribute and setAttribute

Every browser will let you fetch and modify data- attributes using the getAttribute and setAttribute methods, e.g.

1
2
3
4
var msglist = document.getElementById("msglist");
var show = msglist.getAttribute("data-list-size");
msglist.setAttribute("data-list-size", +show+3);

It works, but should only be used as a fallback for older browsers.

JavaScript Parsing #2: jQuery data() method

Since version 1.4.3, jQuery’s data() method has parsed HTML5 data attributes. You don’t need to specify the data- prefix so the equivalent code can be written:

1
2
3
4
var msglist = $("#msglist");
var show = msglist.data("list-size");
msglist.data("list-size", show+3);

However, be wary that jQuery cleverly attempts to convert the data to a suitable type (booleans, numbers, objects, arrays or null) and avoids touching the DOM. Unlike setAttribute, the data() method will not physically change the data-list-size attribute — if you inspect its value outside of jQuery, it would still be ‘5’.

JavaScript Parsing #3: the dataset API

Finally, we have the HTML5 dataset API which returns a DOMStringMap object. You should note that data-attribute names are mapped by dropping the data- prefix, removing hyphens and converting to camelCase, e.g.

attribute name dataset API name
data-user user
data-maxage maxage
data-list-size listSize

Our new code:

1
2
3
4
var msglist = document.getElementById("msglist");
var show = msglist.dataset.listSize;
msglist.dataset.listSize = +show+3;

The datalist API is supported by all modern browsers but not IE10 and below. A shim is available but it’s possibly more practical to use jQuery if you’re coding for the older browsers.

Source Link: http://www.sitepoint.com/use-html5-data-attributes/

Exit mobile version