What role do `data-*` attributes serve in HTML?

The data-* attributes in HTML are specifically designed to store custom data on HTML elements that can then be accessed and manipulated through JavaScript. These attributes allow developers to embed additional information within HTML elements without affecting the validity of the document or impacting the overall structure.

For instance, if you have an that requires specific data for interaction, you could use a data-* attribute to store that data, such as data-user-id="12345". This way, JavaScript can easily retrieve and utilize that information during runtime. This feature is particularly useful for dynamically updating content or functionalities based on user interactions.

Using data-* attributes does not involve controlling visibility in CSS, providing semantic meaning, or directly applying styling; instead, it focuses on enabling JavaScript to read and manipulate data specific to individual elements. Therefore, the use of data-* attributes is essential for enhancing the interactivity and functionality of web applications.