Атрибут data-* тега <figure>
Описание
Пользовательские атрибуты data-* в теге <figure> позволяют хранить дополнительную информацию о графическом контенте. Эти данные могут использоваться JavaScript для создания интерактивных возможностей.
<figure data-image-id="chart-42" data-category="analytics" data-zoomable="true">
<img src="sales-chart.png" alt="График продаж">
<figcaption>Рисунок 3. Квартальные показатели</figcaption>
</figure>
Типичные сценарии применения:
| Тип данных | Пример атрибута | Назначение |
|---|---|---|
| Идентификаторы | data-id="fig-1" |
Связь с базой данных |
| Категории | data-category="infographics" |
Фильтрация галереи |
| Настройки | data-zoom-level="2" |
Параметры отображения |
Пример обработки через JavaScript:
<figure id="interactive-figure" data-zoomable="true" data-max-zoom="300">
<img src="map.png" alt="Интерактивная карта">
<figcaption>Карта региональных отделений</figcaption>
</figure>
<script>
const figure = document.getElementById('interactive-figure');
if (figure.dataset.zoomable === 'true') {
const maxZoom = parseInt(figure.dataset.maxZoom);
// Инициализация функционала увеличения
}
</script>
Стилизация по data-атрибутам:
<style>
figure[data-priority="high"] {
border-left: 3px solid red;
padding-left: 10px;
}
figure[data-type="interactive"] {
cursor: pointer;
}
</style>
<figure data-priority="high" data-type="interactive">
<img src="warning.png" alt="Важное предупреждение">
<figcaption>Срочное обновление данных</figcaption>
</figure>
Рекомендации по использованию:
- Используйте осмысленные имена после префикса data-
- Храните только простые строковые данные
- Для сложных данных используйте JSON в одном атрибуте
- Избегайте дублирования видимого контента
Ограничения:
- Значения всегда строковые (для чисел нужен parseInt)
- Не предназначены для видимого отображения информации
- Нет встроенной валидации данных
Примечание: Data-атрибуты особенно полезны для создания интерактивных галерей, лайтбоксов и сложных визуализаций, где требуется хранить метаинформацию о медиа-контенте.