Los atributos data-* en HTML: qué son y cómo usarlos

En el desarrollo web moderno, uno de los recursos más prácticos y versátiles que nos ofrece HTML5 son los atributos de datos personalizados, conocidos como data-*. Estos atributos permiten almacenar información adicional en los elementos del documento sin necesidad de crear nuevas propiedades o sobrecargar atributos existentes.

¿Qué son los atributos data-*?

Los atributos data-* son atributos personalizados que siguen el formato:

<div data-nombre="valor"></div>

Donde:

data- es el prefijo obligatorio.
nombre es un identificador libre definido por el desarrollador (debe estar en minúsculas y, si es compuesto, usar guiones).
valor es el contenido que se desea almacenar, siempre en formato de cadena.

Ejemplo simple:

<button data-producto-id="123" data-stock="20">
  Comprar producto
</button>

En este caso, el botón almacena datos relacionados con un producto: su identificador y la cantidad en stock.

Ventajas de usar data-*

Flexibilidad: permiten guardar información sin necesidad de modificar el HTML estándar.
Compatibilidad: son compatibles con todos los navegadores modernos.
Integración con JavaScript: se pueden leer y manipular fácilmente con el DOM.
Evitan el abuso de clases o IDs: a veces se usaban para almacenar información, lo cual era incorrecto semánticamente.

Acceso desde JavaScript

JavaScript proporciona una forma muy sencilla de acceder a estos atributos mediante la propiedad dataset.

Ejemplo:

<div id="usuario" data-id="42" data-rol="admin">
  Javier
</div>
<script>
  const usuario = document.getElementById("usuario");
  console.log(usuario.dataset.id);   // "42"  
  console.log(usuario.dataset.rol);  // "admin"    
  // También se pueden modificar  
  usuario.dataset.rol = "editor";
  console.log(usuario.dataset.rol);  // "editor"
</script>

Importante: cuando un atributo tiene guiones, en JavaScript se convierte a camelCase.

Ejemplo:

<div id="info" data-user-name="Carlos"></div>

const info = document.getElementById("info");
console.log(info.dataset.userName); // "Carlos"

Buenas prácticas

Usarlos solo para datos relacionados con el elemento. No deben sustituir a una base de datos ni almacenar grandes cantidades de información.
Mantener los nombres claros y descriptivos. Ejemplo: data-precio, data-categoria, data-user-id.
No abusar de ellos.
Si la información pertenece al contenido visible, debería estar en el propio texto del HTML, no en data-*.

Casos de uso comunes

Identificadores o claves de elementos:

<li data-id="45">
  Tarea pendiente
</li>

Opciones de configuración en componentes:

<div class="slider" data-autoplay="true" data-interval="5000"></div>

Almacenar metadatos de productos en e-commerce:

<button data-producto-id="123" data-precio="19.99">
  Comprar
</button>

Personalización de eventos JavaScript:

<button data-action="eliminar">
  Eliminar
</button>
<button data-action="editar">
  Editar
</button>

Y mi favorito, cambiar idioma con data-* y JSON

Supongamos que tienes dos archivos JSON, uno por idioma:

{
  "saludo": "Hola, bienvenido",
  "despedida": "Adiós y gracias"
}

{  
  "saludo": "Hello, welcome",
  "despedida": "Goodbye and thank you"
}

En el HTML, cada elemento lleva un data-key que indica qué texto cargar del JSON:

<p data-key="saludo"></p>
<p data-key="despedida"></p>
<select id="idioma">
  <option value="es">Español</option>  
  <option value="en">English</option>
</select>

Y en JavaScript haces algo así:

<script>
  const idioma = document.getElementById("idioma");
  const elementos = document.querySelectorAll("[data-key]");
  async function cargarIdioma(lang) {  
    try {
      // Cargar el JSON del idioma elegido
      const response = await fetch(`${lang}.json`);
      const traducciones = await response.json();
      // Recorrer los elementos y poner su traducción           
      elementos.forEach(el => {
        const key = el.dataset.key;
        // clave definida en data-key
        if (traducciones[key]) {
          el.textContent = traducciones[key];
        }
      });
    } catch (error) {
       console.error("Error cargando idioma:", error);
      }
  }
  // Cambiar idioma al seleccionar en el <select>
  idioma.addEventListener("change", () => {
    cargarIdioma(idioma.value);
  });
  // Iniciar con español por defecto
  cargarIdioma("es");
</script>

Los atributos data-* en HTML son una herramienta poderosa y sencilla para enriquecer los elementos del DOM con información adicional. Gracias a su integración nativa con JavaScript mediante dataset, ofrecen una solución flexible para pasar datos sin romper la semántica del documento ni abusar de otros atributos.

Si se usan con criterio, pueden mejorar notablemente la organización y la interacción en proyectos web.

Cool Things In My Cloud