Los Data attributes o Atributos de datos fueron incluidos en HTML5 con el fin que podamos almacenar en los elementos HTML metadatos personalizados que nos permitan instanciarlos y extender su uso.

Los atributos de datos personalizados están destinados a almacenar datos privados en la página o aplicación (son ignorados por sistemas externo) y cada elemento HTML puede tener cualquier cantidad de atributos de datos personalizados especificados, con cualquier valor. Estos pueden extender y mejoran el uso funcional de los elementos HTML en relación a los otros lenguajes que corren del lado del front.

Esta opción no la teníamos en versiones anteriores de HTML por lo que era necesario utilizar los atributos clásicos de los elementos (class, Id o rel) para almacenar y contar con datos alternativos asociados a los elementos. Y por supuestos no era lo ideal puesto que estos atributos “clásicos” fueron creados para fines diferentes.

Atributos de Datos en HTML5

Como mencione anteriormente, HTML5 introduce atributos de datos personalizados para que cuando necesitemos datos adicionales sobre un elemento y no haya un atributo existente que satisfaga las necesidades podamos especificar nuestros propios atributos sobre los elementos, simplemente establecemos el prefijo data-* seguido del nombre que deseemos establecer. Es decir, cualquier atributo en un elemento HTML comience con data-* es un atributo de datos.

<element data-*="value">
El atributo Data debe ser de la forma 'data-nombre', este se especifica en letras minúsculas y se pueden usar guiones para la separación de palabra. Tambien podemos usar la convención camelCase como en JavaScript. Por ejemplo, data-animal-salvaje se convierte en data-animaleSalveje

En el siguiente ejemplo tenemos un listado donde cada ítem almacena información adicional que aunque no es relevante para los motores de indexación o representación visual sí que lo es para la manipulación de estos elementos en el documento web.

<ul id="footballPlayers">
   <li data-team="Barcelona" data-country="Argentina">Messi</li>
   <li data-team="Jueventus" data-country="Portugal">Cristiano</li>
   <li data-team="PSG" data-country="Brasil">Neymar</li>
   <li data-team="Liverpool" data-country="Egipto">Salah Mane</li>
   <li data-team="Real Madrid" data-country="Croacia">Luka Modrić</li>
</ul>

Existen muchas formas de acceder a los elementos mediante estos atributos personalizados por medio de Javascript o CSS, la idea de utilizar esto es brindar una experiencia de usuario más rica y atractiva a los visitantes de nuestro sitio.

Una de las formas mas fáciles que tenemos para acceder a los atributos personalizados con JavaScript es el utilizar los método getAttribute() para devolver el valor del atributo en el elemento, setAttribute para establecerlos y removeAttribute para eliminarlos. Aunque podemos utilizar la propiedad dataset HTMLElement.dataset que también permite obtener y establecer valores de atributos de datos en elementos HTML.

element.getAttribute(attributename)

vamos a usar el siguiente script para tomar del ejemplo anterior todos sus atributos personalizados de cada item de la lista y los mostraremos complementando el contenido de estos, asi que vamos a utiliza el método forEach() para recorrer el objeto.

const player = document.querySelectorAll("#footballPlayers li");
player.forEach( item => {
  const team = item.getAttribute("data-team");
  const country = item.getAttribute("data-country");
  item.textContent += ` es de ${country} y juega en el ${team}` ;
});
Messi es de Argentina y juega en el Barcelona
Cristiano es de Portugal y juega en el Jueventus
Neymar es de Brasil y juega en el PSG
Salah Mane es de Egipto y juega en el Liverpool
Luka Modrić es de Croacia y juega en el Real Madrid

También podemos acceder a estos elementos con atributos personalizados por medio de CSS para cambiar sus estilos con los selectores de atributos disponibles:

[data-name='value'] {
   /* Styles */
}
li[data-team='Argentina'] {
  background: url(img/flag/argentina.png);
}
li[data-team='Portugal'] {
  background: url(img/flag/portugal.png);
}
li[data-team='Brasil'] {
  background: url(img/flag/argentina.png);
}

Ahora, ¿cuando usar y cuando no los Data Attributes de HTML5?

Aunque los Data Attributes resuelven situaciones de almacenamiento de metadatos en los elementos del documento web debemos de tener en cuenta que hay ciertas ocasiones en las que se su uso no es recomendable. Por ejemplo: Si hay un atributo existente que sea más apropiado para almacenar los datos, como el presentar una fecha/hora pues ya existen atributos para este tipo de dato. Otro ejemplo es cuando estos no están destinados a competir con los microformato, pues estos se establecen para diferentes tareas. La consigna es usarlos cuando los atributos clásicos de los elementos HTML no son capaces o ideales para el tipo de dato que queremos almacenar.

Consideraciones finales

Los atributos personalizados de HTML5 son una excelente forma de simplificar el almacenamiento de los datos en las aplicaciones o páginas web, en los últimos años el soporte en los navegadores ha sido del 100% y muchos desarrolladores sacan hoy partida de esta característica de HTML5 para los elementos del documento.