Зачем нужен data атрибут

Data-атрибуты (data-*) позволяют хранить дополнительную информацию в HTML-элементах без использования нестандартных атрибутов или дополнительных свойств в JavaScript. Они полезны для:

1. Хранения данных – можно привязать данные к элементу, не влияя на его отображение или семантику.
2. Доступа через JS/CSS – легко получать и изменять значения через JavaScript (dataset) или даже использовать в CSS.

<div id="user" data-user-id="123" data-role="admin">User Info</div>

const userElement = document.getElementById('user');
console.log(userElement.dataset.userId); // "123"

Пример в CSS:

[data-role="admin"] {
  color: red;
}

Используются для динамического взаимодействия без нарушения валидности HTML.