En el mundo del desarrollo web, la capacidad de personalizar y adaptar elementos HTML es clave para crear aplicaciones más robustas y dinámicas. Uno de los enfoques más útiles en este sentido es el uso de atributos de custom data. Estos atributos permiten almacenar información adicional en los elementos HTML, información que puede ser utilizada fácilmente por JavaScript sin necesidad de crear estructuras más complejas. En este artículo, exploraremos qué son los atributos de datos personalizados, cómo utilizarlos y en qué escenarios son más útiles.

Cómo usar custom data

Custom Data es una característica que encontramos en HTML5 para incorporar información personalizada en atributos de elementos del estándar.

La manera de utilizar esta opción es emplearla como un atributo del elemento o los elementos que deseemos. La lógica sería la siguiente: data-*="algo".

Siempre debemos comenzar con data- y luego del guion, en lugar del  * pondremos la palabra personalizada que deseemos. Entre las comillas, en lugar de "algo", debemos indicar una cadena como valor. Vamos a ver un ejemplo a continuación:

<span data-name="Roger Federer">Tenista record de Torneos de Nivel Mundial</span>

Cómo acceder desde JavaScript

Uno de los aspectos más potentes de los atributos de custom data es su accesibilidad directa desde JavaScript. Usando dataset, podemos acceder a cualquier atributo de custom data y trabajar con ellos.

Mediante JavaScript y el acceso al DOM podremos recuperar el valor que especifiquemos para aplicar funciones o manipular comportamiento y/o apariencia del elemento.

Veamos un ejemplo a continuación:

<!-- HTML -->
<div id="user" data-user-id="123" data-role="admin">Damián De Luca</div>

<!-- JavaScript -->
<script>
  const userElement = document.getElementById('user');
  const userId = userElement.dataset.userId; // '123'
  const role = userElement.dataset.role;     // 'admin'

  console.log(`ID del usuario: ${userId}, Rol: ${role}`);
</script>

En este ejemplo, hemos accedido a los valores de data-user-id y data-role usando dataset. El prefijo data- desaparece cuando accedemos a ellos en JavaScript, permitiéndonos trabajar con el nombre base del atributo.

Conclusión

Existen múltiples razones por las que los atributos de custom data son útiles. Su manera sencilla y clara de almacenar información adicional en HTML sin necesidad de manipular estructuras complicadas es una de las ventajas más detacadas.

Pueden utilizarse en cualquier elemento HTML, lo que permite organizar y manejar datos a nivel de interfaz sin sobrecargar el backend. Al almacenar datos dentro de los elementos HTML, podremos mantener una buena separación entre lógica y presentación, permitiendo un mejor mantenimiento del código.

En este sentido siempre me gusta destacar en mis capacitaciones que, si bien los atributos de datos personalizados son útiles, debemos evitar almacenar demasiada información en ellos. La responsabilidad principal del HTML es estructurar el contenido, no manejar grandes volúmenes de datos.

También hay que destacar que no se recomienda almacenar información sensible en los atributos de custom data. Al estar visibles en el HTML, pueden ser fácilmente inspeccionados por cualquier usuario.

Un excelente artículo sobre este tema lo encontraremos en HTML5 Doctor.