À quoi servent les attributs data en HTML?

Les attributs de données (data-*) permettent de stocker des données supplémentaires et non standardisées sur les éléments HTML côté client sans utiliser explicitement d'autres attributs ou manipuler la structure du DOM à ces fins.

Ils sont utiles pour:

• Stockage de données pour JavaScript: JavaScript peut accéder facilement à ces données et les utiliser pour un comportement dynamique, une interaction avec l'élément ou un échange d'informations entre différentes parties de l'application.

  <div id="user-profile" data-user-id="123" data-user-role="admin">
      Bonjour, admin!
  </div>
  

  // Récupération des données à partir des attributs data-
  const userProfile = document.getElementById('user-profile');
  const userId = userProfile.dataset.userId; // "123"
  const userRole = userProfile.dataset.userRole; // "admin"
  

• Création d'attributs personnalisés: Au lieu d'inventer des attributs non standard (ce qui ne respecte pas la spécification HTML), on utilise data-*, ce qui rend le code plus sémantique et valide.

• Stylisation: Avec des sélecteurs CSS basés sur les attributs, on peut styliser des éléments en fonction des valeurs de leurs attributs data-.

  <button data-status="active">Bouton actif</button>
  <button data-status="inactive">Bouton inactif</button>
  

  /* Stylisation basée sur l'attribut data- */
  button[data-status="active"] {
      background-color: green;
  }
  
  button[data-status="inactive"] {
      background-color: gray;
  }
  

• Frameworks et bibliothèques: De nombreux frameworks et bibliothèques frontend utilisent data- pour initialiser des composants, transmettre des paramètres ou lier des données (par exemple, Vue.js avec v-bind ou React avec des attributs data- pour l'intégration de bibliothèques tierces).

• Microformats et données structurées: Dans certains cas, les attributs data- peuvent être utilisés pour insérer des microformats ou marquer des données compréhensibles par les machines.

En général, les attributs data- offrent une méthode flexible et standard pour stocker des informations supplémentaires directement dans les éléments HTML, ce qui facilite leur interaction via JavaScript et CSS.