Existen ocasiones en las que necesitamos agregar funcionalidades a un código en HTML más allá de las que nos permiten sus atributos. Por esta razón, se crearon los atributos data.

Antes de comenzar con el artículo, quiero explicar qué es un atributo. Un atributo es una palabra que se añade dentro de una etiqueta en HTML, proporcionando más información o modificando el mismo. Algunos atributos pueden ser ALT, ID, CLASS,.. La diferencia con los atributos data, es que los primeros ya están desarrollados para que funcionen de una u otra manera, mientras que los segundos se pueden configurar en función de la necesidad que tengas, añadiendo una palabra identificativa al final (por ejemplo: data-step).
Los atributos data proporcionan una forma estandarizada para extender la información que se puede asociar con un elemento en particular. Se escriben de la siguiente forma:
<span data-step="1" data-msg="Este es el paso 1">Paso 1</span>

Atributos data en estado salvaje

Para contarte como funcionan los atributos data, he pensado que la mejor forma era ponerte un ejemplo. Para ello he construido una página con un botón. Al pulsar el botón, de forma aleatoria, aparecerá un mensaje en función del valor recibido y se ejecutarán algunos estilos / scripts diferentes. En lugar de simplemente agregar una clase “result-XXX” al elemento, he optado por agregar el resultado con la ayuda de los atributos data.
Me ha parecido un poco más limpio, y de esta manera puedo modificar el elemento con CSS, dependiendo del valor y ejecutar los script que necesito según dicho valor (sin tener que hacer una comprobación cada vez que necesite saber qué valor ha salido).
En un principio, el atributo data-result en el elemento section, está vacío, tal y como puedes ver en la pestaña HTML del ejemplo.

Usando atributos data con JavaScript

Todas los atributos data se almacenan en un objeto, al que se accede a través del dataset del elemento. Cuando se pulsa el botón y se calcula un valor, agrego dicho valor al atributo data-result de la forma en que aparece en las líneas 11, 13, 15 y 17 del ejemplo en JavaScript.
De esta forma, cuando pulsas de nuevo el botón, no hay que eliminar el valor anterior, sino que basta con reemplazarlo en el atributo.
Como data-result es un atributo, también podría haber usado quiz.setAttribute("data-result", "*2**");.

Utilizando atributos data con CSS

Para finalizar, voy a cambiar los estilos del elemento dependiendo del valor. Para ello, bastará con poner entre corchetes [], los atributos data cuyo CSS se quiera modificar y asignarle el valor el que se quiera tener en cuenta, como ocurre en las líneas 5, 10, 15 y 20 del ejemplo en CSS.

Cuidado

No olvides que HTML ya tiene sus propios atributos incorporados dentro de su semántica, por lo que antes de crear atributos data personalizados te recomiendo que investigues primero si ya existe alguno que haga esa función, evitando errores y código sucio.
Aquí tienes el código completo de este ejemplo:
<button id="change">Push me</button>
<section id="quiz" data-result="">
  <div class="questions"></div>
  <div class="results"></div>
</section>


Nosotros, en Web App Design, sabemos la importancia que tienen los atributos data a la hora de desarrollar un proyecto. Los utilizamos para crear tutoriales guiados a través de plataformas online o páginas web.
Contacta con nosotros y te ayudaremos a implementarlo en tu web para facilitar su uso a los visitantes y hacer que tengan una mejor experiencia de usuario.