HTML5 Custom Data Attributes

Los 'data attributes' nacen a raíz de la necesidad de incluir atributos propios en los elementos HTML y que estos mantuviesen una sintaxis correcta en la página.

En versiones anteriores de de HTML se realizaban algunas perversiones con el código, sobre todo por parte de los programadores que utilizaban javascript. Como puede ser este ejemplo:

Que solía tener un código javascript asociado del tipo:

var button= document.getElementById('botonBorrar');
var identificador= div.getAttribute('idlibro');

Permitiendo así asociar valores concretos de un objeto a determinados elementos. Esto que en apariencia es super útil, choca con la validación que se realizaba de la página HTML, siendo sintácticamente incorrecto y por tanto una 'mala praxis'.

A raíz de la creación de HTML 5 se ha querido acabar con dicho problema, dando a los desarrolladores una herramienta para poder realizar dicha utilidad sin necesidad de romper la validación sintáctica del documento. Esto es posible gracias al atributo 'data'. Es decir que ahora podemos añadir cualquier atributo al elemento, siempre y cuando le añadamos delante el prefijo 'data-' permitiendo así customizar los elementos y mantener un documento válido. Veamos un ejemplo :

La obtención del valor lo podemos hacer tal y como hemos indicado anteriormente o si usamos jquery con el siguiente código:

$('#botonBorrar').data('idlibro');

Por último solo queda remarcar que este atributo es case sensitive por lo cual hay que tener cuidado con el nombre que se da a la variable. Omitiendo el prefijo 'data-' esta debe ser entera en minúsculas o con un guión antes si se indica una mayúscula. Ejemplo:

$('#botonBorrar').data('idlibro');  //correcto
$('#botonBorrar').data('id-libro'); //correcto
$('#botonBorrar').data('id-Libro'); //correcto
$('#botonBorrar').data('idLibro');  //incorrecto

En el caso de que se indique un valor incorrecto, al recuperar el valor del atributo este será undefined.