Для хранения пользовательских данных в HTML-элементе существуют пользовательские атрибуты данных или data-* атрибуты.

<div id="user-profile" data-user-id="42" data-role="admin">
  <!-- какие-то данные -->
</div>

Это data-* атрибуты, которые позволяют добавлять дополнительную информацию.

Несомненно, очень хорошо, что доступ к пользовательским атрибутам и их значениям можно получить, как в JavaScript (c помощью метода getAttribute() или объекта dataset), так и в CSS (с помощью функции attr()).

data-атрибуты идеально подходят для динамических приложений, использующих метаданные.

Дополнительная информация на MDN

Спасибо за внимание.