What are data attributes in HTML used for?

Data attributes (data-*) allow storing additional, non-standard data about HTML elements on the client side without explicitly using other attributes or manipulating the DOM structure for these purposes.

They are useful for:

• Storing data for JavaScript: JavaScript can easily access this data and use it for dynamic behavior, interaction with the element, or exchanging information between parts of the application.

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

  // Accessing data from data-attributes
  const userProfile = document.getElementById('user-profile');
  const userId = userProfile.dataset.userId; // "123"
  const userRole = userProfile.dataset.userRole; // "admin"
  

• Creating custom attributes: Instead of inventing your own non-standard attributes (which do not conform to the HTML specification), data-* attributes are used, making the code more semantic and valid.

• Styling: Using CSS selectors based on attributes, elements can be styled according to the values of their data- attributes.

  <button data-status="active">Active button</button>
  <button data-status="inactive">Inactive button</button>
  

  /* Styling by data-attribute */
  button[data-status="active"] {
      background-color: green;
  }
  
  button[data-status="inactive"] {
      background-color: gray;
  }
  

• Frameworks and libraries: Many frontend frameworks and libraries use data- attributes to initialize components, pass parameters, or bind data (for example, Vue.js with v-bind or React with data- attributes for third-party library integration).

• Microformats and structured data: In some cases, data- attributes can be used to embed microformats or data markup understandable by machines.

Overall, data- attributes provide a flexible and standard way to store additional information directly in HTML elements, simplifying interaction with them using JavaScript and CSS.