Los atributos data- son una de las grandes incorporaciones en HTML5 y tienen un rol importante en el desarrollo de webs semánticas. Veremos cómo se utilizan.
HTML5
Los atributos data se crearon para almacenar información adicional sobre nuestros elementos HTML. Nos permite evitar utilizar múltiples clases y darle mucha más semántica a nuestro código.
Su sintaxis es muy sencilla, un ejemplo sería:
<div data-role="banner">
Contenido
</div>Si marcamos un elemento con un atributo data-, es porque queremos darle un tratamiento especial. En la mayoría de los casos, usaremos este valor en nuestro fichero de estilos o de scripts.
Usando nuestro elemento en nuestros estilos
Mediante nuestro CSS podemos manipular los estilos de nuestro elemento data-, por ejemplo:
[data-role="banner"] {
text-align: center;
}En este simple ejemplo estamos centrando el contenido del div con la propiedad data-role igual a banner
También podemos asignar el valor del data-role antes del contenido del div:
div::before {
content: attr(data-role);
}Javascript
Para acceder al valor del atributo mediante Javascript es muy sencillo. Se utiliza la propiedad dataset:
<script>
var div = document.querySelector('div');
data = div.dataset;
data.propiedad = 'valor'
console.log(data.propiedad);
</script> jQuery
jQuery tiene un método llamado data(), que parsea los atributos data de HTML5:
<script>
var div = $('div');
div.data("propiedad", 'valor');
console.log(div.data("propiedad"));
</script> Conclusiones
Es muy importante no escribir datos sensibles en nuestros atributos data, ya que son accesibles vía código fuente. Tampoco debemos abusar de un uso de estos atributos ya que la performance de nuestra página se puede ver afectada.
Versiones antiguas de Internet Explorer tienen algunos problemas con estas prácticas. Pero lo mejor es recomendar a la gente que actualice la versión de su navegador que invertir tiempo en funcionalidad para Internet explorer 7 o anteriores.