'What is the purpose of storing custom data on HTML data attributes?

I've been trying to understand "Why do custom data might be needed in an HTML tag? And why does it stored in data-* attributes?". Is it used mostly when there is no database, no API? Or is it irrelevant?.

I understand that data attributes can be used for storing the information that can't be in class, id and can be used in CSS or JS but what could be the case for storing it in an HTML tag? I'm trying to figure out the best possible right way to use custom data and data attributes.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source