Atributos personalizados en HTML5

HTML5 trae consigo un buen número de nuevas características que pueden ayudarnos como desarrolladores.

Últimamente me encuentro mucho código HTML con atributos del estilo data-* (por ejemplo, data-city, data-role, etc.). ¿Qué son exactamente estos atributos? Pues esto es precisamente sobre lo que hablaremos en este post.

Antes de HTML5 un recurso muy utilizado era crear atributos personalizados en los elementos HTML para guardar información relativa al elemento. Su lectura y manipulación era sencilla porque tanto los métodos nativos del DOM como jQuery así lo permitían. Sin embargo, si validábamos nuestros código contra la w3c, estos atributos no le gustaban y fallaba la validación (básicamente porque estos nuevos y personalizados atributos no forman parte de la especificación HTML).

Por ejemplo, el siguiente código (con la propia validación que lleva incluida el Visual Studio) nos arroja un warning:

Sin embargo, somos perfectamente capaces de leer su valor a través de jQuery:

alert($("#miParrafo").attr("miatributo")); //sergio

 

Dada esta situación, HTML5 ha querido escuchar nuestras plegarias y ha incluido como parte de su especificación la posibilidad de incluir atributos personalizados (o custom data attributes como se conoce a esta característica en inglés). Para que un atributo sea considerado personalizado tiene que comenzar con “data-“ (sin las comillas). De este modo el validador no fallará porque detectará que los atributos son personalizados. Por ejemplo, ahora Visual Studio ya no nos lanza ningún warning:

<p id="miParrafo" data-miatributo="sergio">

panicoenlaxbox.blogspot.com</p>

 

Igualmente, podemos seguir trabajando con este atributo bien a través de métodos DOM (getAttribute/setAttribute), bien a través de jQuery (attr).

var p = document.getElementById("miParrafo");

alert(p.getAttribute("data-miatributo")); //sergio

p.setAttribute("data-miatributo", "sergio león");

alert(p.getAttribute("data-miatributo")); //sergio león

 

Además, se ha incluido en javascript la propiedad dataset, que automáticamente incluye los atributos personalizados en una colección (quitando el literal data-). Esta propiedad aún no está soportada por todos los navegadores, pero por ejemplo en Chrome:

 

alert(p.dataset.miatributo); //sergio león

p.dataset.miatributo = "sergio león gonzález";

p.dataset.miatributo = null; //elimina el atributo

 

Otro dato a tener en cuenta es que jQuery automáticamente carga estos atributos personalizados en la propiedad data, y al igual que la propiedad dataset, elimina el literal data-.

var p = $("#miParrafo");

alert(p.data("miatributo")); //sergio

 

Por último, tanto con dataset como con data, si el nombre del atributo personalizado es complejo, por ejemplo data-tu-atributo, hay que fijarse que la convención utilizada para crear la propiedad en dataset y el elemento en data utiliza camelCase. Por ejemplo:

<p id="miParrafo" data-tu-atributo="carmen">

panicoenlaxbox.blogspot.com</p>

 

var p = $("#miParrafo");

alert(p.data("tuAtributo")); //carmen

alert(p.get(0).dataset.tuAtributo); //carmen

 

A partir de ahora, cualquier cosa que leas por ahí que tenga data-{cualquier cosa}, que sepas que es un atributo personalizado de HTML5 y que no tiene un significado especial sino para quien trabaje con esos atributos.

Un saludo!