В HTML есть набор глобальных атрибутов. Например
class, id, lang, dir, hidden, translate и так далее. Полный список можно посмотреть в спецификации. Эти атрибуты можно указывать у любых элементов.Некоторые атрибуты специфичны для конкретных элементов. Например
type и value у <input> или scope и colspan у <th>. У таких атрибутов бывают правила использования в сочетании с другими атрибутами.Стандарт ARIA предлагает набор атрибутов с префиксом
aria-* и атрибут role для создания более доступных сайтов. У них есть правила использования и ограничения. В целом их можно отнести к глобальным и задавать на любых элементах.Когда стандартных атрибутов не хватает, разработчики могут безопасно применять пользовательские атрибуты с префиксом
data-*. Кроме того, для работы с data-* атрибутами DOM API предлагает интерфейс dataset.Некоторые разработчики и авторы библиотек пренебрегают префиксом
data-*, аргументируя это лучшим DX. Отчасти это справедливо. С другой стороны, это нарушает стандарт и может привести к долгосрочным последствиям.При разработке Popover API планировали добавить атрибут
popup. Исследование показало, что достаточно много сайтов уже используют атрибут с таким названием, поэтому внедрение popup сломает сайты. В итоге атрибут назвали popover.Если вы автор библиотеки или просто хотите использовать пользовательский атрибут — добавьте префикс
data-*. 5 лишних символов не сильно испортят DX, но предотвратят возможные конфликты и облегчат жизнь авторам стандартов.Или используйте пользовательские элементы. Их особенность в том, что нет ограничений на имена атрибутов, поэтому можно валидно и не нарушая стандарт задавать любые. Главное помнить о глобальных атрибутах и ARIA.
#html