HTML 5 data- elements to store private values ...

This allows you to write valid HTML markup (passing an HTML 5 validator) while, simultaneously, embedding data within your page. A quick example:
PLAIN TEXT
HTML:

   1.
      
   2.
      <li class="user" data-name="John Resig" data-city="Boston"
   3.
           data-lang="js" data-food="Bacon">
   4.
        <b>John says:</b> <span>Hello, how are you?</span>
   5.
      </li>
   6.
      

Which you can get at via some simple code:
PLAIN TEXT
JAVASCRIPT:

   1.
      
   2.
      var user = document.getElementsByTagName("li")[0];
   3.
      var pos = 0, span = user.getElementsByTagName("span")[0];
   4.
      
   5.
      var phrases = [
   6.
        {name: "city", prefix: "I am from "},
   7.
        {name: "food", prefix: "I like to eat "},
   8.
        {name: "lang", prefix: "I like to program in "}
   9.
      ];
  10.
      
  11.
      user.addEventListener( "click", function(){
  12.
        var phrase = phrases[ pos++ ];
  13.
        // Use the .dataset property
  14.
        span.innerHTML = phrase.prefix + user.dataset[ phrase.name ];
  15.
      
  16.
        // OR, to work with old browsers
  17.
        //span.innerHTML = phrase.prefix + user.getAttribute("data-" + phrase.name );
  18.
      }, false);
  19.

source: ajax-blog

 View Full Story.