Атрибут data-* тега <sup>

Описание

Атрибуты data-* позволяют хранить дополнительную информацию в элементе <sup>. Эти пользовательские атрибуты могут использоваться JavaScript для различных целей, не влияя на отображение элемента.

Пример использования:
<p> Температура воды: 25<sup data-unit="celsius" data-precision="1">o</sup>C </p>

Синтаксис именования:

Пример Описание
data-unit Хранит информацию о единицах измерения
data-reference-id Связывает сноску с источником
data-original-value Сохраняет исходное значение

Пример с JavaScript:

<p> X<sup data-exponent="2" data-base="5">2</sup> = 25 </p> <script> const supElement = document.querySelector('sup[data-exponent]'); console.log('База:', supElement.dataset.base); // 5 console.log('Экспонента:', supElement.dataset.exponent); // 2 </script>

Особенности работы:

  • Имена атрибутов должны быть в kebab-case (дефисы между словами)
  • Доступ через JavaScript: element.dataset.propertyName
  • Не влияют на отображение элемента
  • Поддерживаются всеми современными браузерами

Рекомендации:

  • Используйте для хранения мета-информации
  • Выбирайте осмысленные имена атрибутов
  • Избегайте хранения больших объемов данных
  • Сочетайте с другими атрибутами для комплексных решений

Ограничения:

  • Значения всегда хранятся как строки
  • Не предназначены для стилизации (используйте классы)
  • Избегайте хранения чувствительной информации
  • Сложные структуры данных лучше хранить в JavaScript-объектах

Примечание: Для сложных интерактивных элементов с большим количеством данных рассмотрите использование JavaScript-объектов вместо множества data-атрибутов.