Атрибут data-* тега <sub>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в элементе <sub>. Эти пользовательские атрибуты не влияют на отображение, но могут быть использованы в CSS и JavaScript.
<p>
Химический элемент: H<sub data-element="hydrogen" data-atomic-number="1">2</sub>O
</p>
Синтаксис data-атрибутов:
| Формат | Пример | Описание |
|---|---|---|
data-имя |
data-index-type |
Простой атрибут |
data-составное-имя |
data-chemical-symbol |
Составное имя (дефисы вместо camelCase) |
Пример использования в CSS:
<style>
sub[data-element="hydrogen"] {
color: #e91e63;
font-weight: bold;
}
sub[data-atomic-number]::after {
content: " (№ " attr(data-atomic-number) ")";
font-size: 0.7em;
}
</style>
<p>
Вода: H<sub data-element="hydrogen" data-atomic-number="1">2</sub>O
</p>
Рекомендации:
- Используйте для хранения информации, связанной с индексом
- Придерживайтесь именования через дефис (data-atomic-number)
- Для сложных данных используйте JSON в одном атрибуте
- Избегайте хранения больших объемов данных
Ограничения:
- Значения всегда строковые (нужно преобразовывать числа/булевы)
- Не предназначены для хранения больших объемов данных
- Доступ через dataset не поддерживается в очень старых браузерах
Пример с JSON данными:
<p>
Формула: C<sub data-element='{"symbol":"C","name":"Carbon","number":6}'>6</sub>
H<sub data-element='{"symbol":"H","name":"Hydrogen","number":1}'>12</sub>
O<sub data-element='{"symbol":"O","name":"Oxygen","number":8}'>6</sub>
</p>
Примечание: Data-атрибуты особенно полезны для научных и химических формул, где требуется хранить дополнительную информацию об элементах.