5. HTML data attributes - TeresaMarbanCastro/Learning-Kairos GitHub Wiki

Los data-atributes de HTML5 sirven para almacenar información que no es estándar o no está incluida en una determinada etiqueta como puede ser

      <input type="radio" />

Cuando quiero incorporar información adicional, puedo crear un data-atribute y añadirlo dentro de la etiqueta html.

     <div data-key="65" class="audio"></div>

En este ejemplo recojo información sobre la tecla que pulsa el usuario.

Para acceder en JS a esta propiedad, se accede al objecto que contiene todos estos elementos .dataset.data-attribute. Por ejemplo:

document.querySelector('.audio').dataset.key // 65

Para acceder en CSS a estas propiedades se utiliza el atributo de selectores []. Por ejemplo, si queremos seleccionar sólo el contenedor con la tecla 65:

Aunque estos ejemplos son muy básicos, puede llegar a ser muy útil guardar información en los elementos ya que a veces lo que nos ofrecen las etiquetas de HTML es limitado.