follow me on twitter

follow me on twitter.

Sunday, February 6, 2011

HTML5 datasets and their socio-political underpinnings

While skimming through the HTML5 features I stumbled upon the dataset attribute feature. In HTML5 developers are allowed to put some data-* attributes on an HTML element to bind data to it:

   <li id="switzerland" 
      data-continent="Europe" data-population="7000000" data-id="23">Switzerland</li>
   <li id="germany" 
      data-continent="Europe" data-population="83000000" data-id="12">Germany</li>
   <li id="egypt" 
      data-continent="Africa" data-population="81000000" data-id="16">Egypt</li>

Thinking about it I found many interesting aspects for this feature in particular and the HTML5 specification in general.

At first it's about the new philosophy with which the HTML5 specification has been done. Sometimes this is called the 'paving the cow path' principle. The HTML5 specification does not only envision a bright future where everything should be better. Instead many features and techniques currently implemented by browser vendors or often done by webdevelopers became part of the standardization process.  Dataset attributes is such an example. Many JavaScript libraries already augment HTML tags with proprietary attributes to communicate data from a server side page template to a script of the library.  Dojo, among others, is a famous example doing this. By including dataset attributes the W3C provides a way for such approaches to become a standard compliant feature instead of an clever hack.

Another nice thing about dataset attributes is that, in spite of not being standard compliant prior to HTML5,  it works nicely on older browsers as well. It does not hurt in a way that a browser reports an error and furthermore it can be implemented with JavaScript when browser support is missing. So its easy to enable older browsers to support the feature and once a time all browsers support the feature it comes out of the box.

In HTML5 browsers the data on the above li elements can be accessed easily by using the HTML5 API:

var data = document.getElementById('switzerland').dataset;
log( "population: " + data.population );

Currently browser support for that feature is very bad. But as mentioned above we can implement this easily by using the good old DOM API:

function init() {
    // get data for a single li element
    var dataItem = getData(document.getElementById('switzerland'));
    log( "population: ", dataItem.population );
function getData(domElement) {
    var atts = domElement.attributes, // get the attributes of the dom element
    len = atts.length,                // get the length once
    i = len,                          // get the length once
    dataset = {};                     // the object ot store the HTML5 microdata properties
    // fast loop over attribute array (especially for DOMElementCollections). i-- not JSLint compliant! 
    while(i--) {
        var att = atts[(len-1) - i];                       // get the attribute
        if ("data-") == 0) {              // filter HTML5 data attributes
            dataset[] = att.value;    // add as property to the store object
    return dataset;

If you are a JQuery user you are already on the save side. jQuery comes with the data() method which does automatically include HTML5 dataset attributes. So accessing the above data with jQuery is a snap:

  // a single elements data
  log("jquery --->" , $('#switzerland').data()); 
  // match each li to call the function with it
  $('li').each(function(idx) {
     // jQuery includes HTML5 data attributes in its data feature
     var dataset = $(this).data();
     // log to firebug console
     log("data item of list item " + idx + " -->", dataset );

The dataset feature of HTML5 exemplifies how standards could try to catalyse an already ongoing process. Picking a common technique or coding practice and streamline it to a standardized way of doing it. This way developers, vendors and library providers are not only encouraged to go along the same track but it does really 'pave the path' in a way that further negotiations or specification efforts are minimized by referencing to the standard. I economic history such an approach is highlighted by Douglass C. North with the concept of minimized transaction costs which he sees as the main advantage of socio-political institutions ( The very same can be applied to the institution of technical standards as the W3C specs are, especially if hegemonial leaders or monopolists support them as well. 

Whenever a databinding feature should be implemented or a communication technique between your server-side templating framework and a JavaScript library, HTML5 dataset attributes should be on your radar.