Для чего нужны data-атрибуты в HTML?

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

Они полезны для:

• Хранения данных для JavaScript: JavaScript может легко получить доступ к этим данным и использовать их для динамического поведения, взаимодействия с элементом или обмена информацией между частями приложения.

  <div id="user-profile" data-user-id="123" data-user-role="admin">
      Привет, admin!
  </div>
  

  // Получение данных из data-атрибутов
  const userProfile = document.getElementById('user-profile');
  const userId = userProfile.dataset.userId; // "123"
  const userRole = userProfile.dataset.userRole; // "admin"
  

• Создания пользовательских атрибутов: Вместо изобретения собственных нестандартных атрибутов (что не соответствует спецификации HTML), используются data-*, что делает код более семантичным и валидным.

• Стилизации: С помощью CSS-селекторов по атрибутам можно стилизовать элементы на основе значений их data-атрибутов.

  <button data-status="active">Активная кнопка</button>
  <button data-status="inactive">Неактивная кнопка</button>
  

  /* Стилизация по data-атрибуту */
  button[data-status="active"] {
      background-color: green;
  }
  
  button[data-status="inactive"] {
      background-color: gray;
  }
  

• Фреймворков и библиотек: Многие фронтенд-фреймворки и библиотеки используют data-атрибуты для инициализации компонентов, передачи параметров или связывания данных (например, Vue.js с v-bind или React с data-атрибутами для интеграции сторонних библиотек).

• Микроформатов и структурированных данных: В некоторых случаях data-атрибуты могут использоваться для внедрения микроформатов или разметки данных, понятных машинам.

В целом, data-атрибуты обеспечивают гибкий и стандартный способ хранения дополнительной информации непосредственно в HTML-элементах, что упрощает взаимодействие с ними с помощью JavaScript и CSS.