HTML 5, JQuery y los atributos DATA

Desde que utilizamos jquery muchas veces nos vemos obligados a crearnos atributos con nombres 'raros' dentro de tags HTML para tener almacenadas algunas propiedades extras como por ejemplo:

<a id='d' href='x' numero='1' valor='3' />

En este caso numero y valor no son atributos reconocidos por los navegadores aunque con jquery si funciona $('#d').attr('numero')

Para estos casos en HTML 5 se han inventado los atributos DATA por ejemplo:

<li class="user" data-name="John Resig" data-city="Boston" data-lang="js" data-food="Bacon">

Donde lo que vaya despues de data- nos lo podemos inventar y estos parámetros si son reconocidos por los navegadores y jquery desde la versión 1.4.4 (la última) incorpora una función específica para los mismos:

$("li").data("name") === "John Resig";

Incluso pueden definirse objetos json dentro de estos atributos

<div data-role="page" data-hidden="true" data-options='{"name":"John"}'></div>

Y accederíamos

$("div").data("options").name === "John";