Atributos data de HTML5

Son muchas las novedades que trae HTML5. Novedades que ya no solo afectan a la sintaxis de HTML, sino que nos abre un gran abanico de posibilidades de interacción de Javascript con el propio HTML a través de APIs y nuevos elementos con funciones más allá de la semántica. Este es el caso de los nuevos atributos data. ¿Qué son y para que sirven?

Son atributos donde podemos guardar y asignar información en el elemento que contiene dicho atributo. Esta información puede ser cualquier cadena o String. Para el usuario o el navegador será invisible pero útil para nosotros y para la página. No solo nos dará información del elemento, sino que podremos interactuar con ella con un poco de Javascript. Aquí un ejemplo sencillo:

<li id="perfil" data-edad="27" data-sexo="M">Jairo Calero</li>

Cuando la información que queremos guardar, tenemos otro atributo ya existente que cumple esa función es recomendable usarlo antes que los atributos data, que están hecho para cuando no tenemos otro atributo que pueda guardar dicha información.
Aunque estos atributos están hechos para guardar información util para el sitio web o aplicación pero invisible para el usuario, nos puede interesar mostrarlo en la página. Para ello tenemos varias maneras. La más sencilla es mostrandolo como contenido adicional con las pseudo-clases :before y :after de CSS. Siguiendo con el ejemplo anterior:

#perfil:after
{
    content: "(Edad: " attr(data-edad) ", Sexo: " attr(data-sexo) ")";
}

Además podemos manipular y leer el valor del atributo con Javascript. La manera más sencilla es con la propiedad dataset. Con esta propiedad eliminamos el pefijo «data» al indicar el atributo en Javascript:

var elemento = document.getElementById("perfil");
var edad = elemento.dataset.edad; //Valor 26

//Si usamos jQuery

var edad = $('#perfil').data('edad');

Es importante saber que este atributo es válido para cualquier elemento del HTML. Compatible con cualquier navegador que lea doctypes de HTML5. Y que siempre tiene que escribirse en minúscula. Aquí os dejo un ejemplo «tonto» de como manipularlo con Javascript:

<style>
  #tonto:after
  {
      content: "(" attr(data-click) " tontos han hecho click)";
  }
</style>
<script type="text/javascript">
  var elemento = document.getElementById("tonto");

  elemento.addEventListener("click", function(){
      elemento.dataset.click++;
  });
</script>
<li id="tonto" data-click="0">Tonto el que pulse aquí</li>

Tonto el que pulse aquí