Представьте: вы кладёте вещи в шкаф.
Вы не просто бросаете всё в кучу. Вы кладёте носки в один ящик, рубашки — в другой, обувь — на полку.
Почему? Чтобы найти нужное быстро, без копания в хаосе.
Веб-страница — это тоже шкаф. А data-* атрибуты — этикетки на ящиках, которые видите только вы (и JavaScript).
Браузер их игнорирует. Пользователь — не замечает.
Но они делают ваш код чище, логичнее и управляемее.
Так что же такое data-*?
Это пользовательские атрибуты в HTML, которые начинаются с data-, за которым следует любое имя без заглавных букв и без двойных дефисов.
Пример:
Здесь:
- data-action — что делать?
- data-id — с каким объектом?
- data-confirm — нужно ли подтверждение?
Браузер не знает, что такое data-action. И это хорошо. Он не пытается «исправить» вашу логику. Он просто хранит данные «про запас».
Почему нельзя просто придумать свой атрибут?
Например — <button action="delete">?
Потому что:
- Нестандартные атрибуты = риск.
Браузер может их проигнорировать, переписать или сломать валидацию HTML. - Стандарт data-* — официально разрешён (спецификация WHATWG/W3C).
Он гарантированно не конфликтует с будущими HTML-атрибутами. - JavaScript умеет с ними «дружить» через dataset — удобный API.
Пример на JavaScript:
Заметьте: data-confirm → dataset.confirm (дефис убирается, следующая буква — в верхний регистр: data-user-id → dataset.userId). Это называется camelCase-преобразование.
Когда использовать data-* — и когда НЕТ
✅ Используйте, если:
- Передаёте данные из бэкенда в фронтенд без AJAX (например, ID товара, настройки виджета).
- Нужно параметризовать поведение JS-скрипта (тип модального окна, URL для отправки и т.п.).
- Делаете переиспользуемый компонент (например, кастомный аккордеон с data-target="#panel1").
❌ Не используйте, если:
- Данные нужны для стилей → лучше классы или CSS-переменные.
- Атрибут описывает семантику элемента → ищите стандартный аналог (<time datetime="...">, <img alt="...">, <a href="...">).
- Передаёте чувствительные данные (пароли, токены) — data-* видны в DevTools!
Реальный пример: кастомный тултип
JavaScript (при наведении):
Здесь data-* — интерфейс между HTML, CSS и JS. Три слоя говорят на одном языке.
Итог — 3 правила data-*
- data- — это пространство имён для вас.
Как личный ящик в общем шкафу: никто не лезет, всё на месте. - Имена — только в kebab-case, в dataset — в camelCase.
data-user-id → dataset.userId. Запомните переход. - Не храните в них то, что можно выразить стандартными средствами.
Если можно — используйте <button type="submit">, а не <button data-type="submit">.
data-* — не «костыль». Это инструмент взрослого фронтендера, который ценит читаемость, гибкость и будущее себя самого — через 6 месяцев, когда придётся чинить этот код.