Skip to main content

HTML 5 data-* attributes, how to use them and why

It is always tempting to add custom attributes in HTML so that you can use the data stored there to do X. But if you do that there is no way of knowing if your HTML attribute will not be overridden in the future and used for something else and additionally you will not be writing valid HTML markup that can pass HTML 5 validator and with that you can create some very bad side effects. That is why there is a spec in HTML 5 called custom data attributes that enable number of useful features.

You may go around and read the specs, but the basic idea is very simple, you can add any attribute that starts with "data-" and that attribute will be treated as non-visible data for that attribute. By non-visible I mean that it is not something that gets rendered to the client so it does not affect the layout or style of the page, but it is there in the HTML so in no way this is private.
So let's get right into it, the following snippet is a valid HTML5 markup


  <div id="awesome" 
     data-hash="3e4ae6c4e30e50e4fdfc7bf439a09974">Some awesome data</div>


Great so now how do you read the data from there? Well, you can go through the elements and get the attributes you need or you can go and use jQuery if it is already there. Using jQuery's .data() API  you can work with the "data-*" elements. One method is .data(obj) added in jQuery1.4.3 that basically retrieves data for the selected element.
For example, if you want to get the value of the data-hash attribute with the following snippet:


 var dataHashValue = jQuery("#awesome").data('hash');
 console.log(dataHashValue);

You can also use a JSON syntax in the data fields  for example if you have the following HTML:

<div id="awesome-json" data-awesome='{"game":"on"}'></div> 

Accessing data from js can be done directly just by adding the JSON key to the result:

  var gameStatus= jQuery("#awesome-json").data('awesome').game;
  console.log(gameStatus);

You can also set the data using .data(key,value) directly from JS. One important thing to remember is that the "data-*" attributes should be linked to the element in some way. They should add additional info about that element or the data it contains and not act just as a storage for everything 

You can go around and play with it in the following jsfidde.

Related links:

Popular posts from this blog

Basic Authentication with RestTemplate

Spring Rest Templates are very good way of writing REST clients. By default they work with basic HTTP so if we need to use Basic Authorization we would need to init the rest template with custom HttpClient. This way the Rest Template will automatically use Basic Auth and append to the HTTP headers "Authorization: Basic BASE64ENCODED_USER_PASS".

HttpClient client = new HttpClient(); UsernamePasswordCredentials credentials = new UsernamePasswordCredentials("USERNAME","PASS"); client.getState().setCredentials( new AuthScope("www.example.com", 9090, AuthScope.ANY_REALM), credentials); CommonsClientHttpRequestFactory commons = new CommonsClientHttpRequestFactory(client); RestTemplate template = new RestTemplate(commons); SomeObject result = template.getForObject( "http://www.example.com:9090/",SomeObject.class );

In EE application this would probably be managed by DI framework like Spring Core and only initialized once sin…

How to Not Hate JavaScript: Tips from the Frontline

This article was originally published on voxxed under, https://www.voxxed.com/blog/2014/11/how-to-not-hate-java-script-tips-from-the-frontline/


In my work assisting teams with JavaScript related problems, I’ve noticed some common issues. If you're experiencing frustrations with the language too, this article might be of some assistance. Disclaimer: a few of my tips might be obvious to some of you, but hopefully you’ll find at least some useful nuggets of information here! These pointers are especially useful when dealing with enterprise applications and CMS solutions. This is where we have our code, the CMS code, the code from that team nobody wants to mention...and, of course, all of them are loaded asynchronously.
The Debugger Statement
This is one of the most underused features when dealing with JavaScript, especially since it’s supported by the majority of browsers. The debugger statement was part of the first edition of ECMA Script so it's been here for quite some time.

F…