Атрибут data-* тега <figcaption>
Описание
Пользовательские атрибуты data-* в теге <figcaption> позволяют хранить дополнительную информацию, связанную с подписью. Эти данные могут быть использованы JavaScript или CSS для создания интерактивных возможностей.
<figure>
<img src="chart.png" alt="Статистика">
<figcaption data-category="finance" data-visible="true" data-chart-type="bar">
Рисунок 1. Финансовые показатели за 2025 год
</figcaption>
</figure>
Основные сценарии применения:
| Тип данных | Пример атрибута | Назначение |
|---|---|---|
| Классификация | data-category="nature" |
Группировка подписей по темам |
| Состояние | data-visible="false" |
Управление видимостью |
| Метаданные | data-author="Иванов" |
Информация об авторе |
Пример доступа через JavaScript:
<figure>
<img src="map.jpg" alt="Карта">
<figcaption id="map-caption" data-region="europe" data-zoom-level="3">
Карта Европейского региона
</figcaption>
</figure>
<script>
const caption = document.getElementById('map-caption');
console.log('Регион:', caption.dataset.region); // "europe"
console.log('Масштаб:', caption.dataset.zoomLevel); // "3"
// Изменение данных
caption.dataset.zoomLevel = 4;
</script>
Использование в CSS:
<style>
figcaption[data-priority="high"] {
color: #d32f2f;
font-weight: bold;
}
figcaption[data-visible="false"] {
display: none;
}
</style>
<figure>
<img src="warning.png" alt="Предупреждение">
<figcaption data-priority="high" data-visible="true">
Важное предупреждение!
</figcaption>
</figure>
Правила именования:
- Должны начинаться с
data- - Используйте только строчные буквы и дефисы
- Избегайте специальных символов
- Выбирайте осмысленные имена
Ограничения:
- Значения всегда строковые (для чисел нужен parseInt)
- Не предназначены для видимого отображения
- Нет встроенной валидации данных
- Не влияют на SEO напрямую
Примечание: Атрибуты data-* предоставляют гибкий способ хранения дополнительной информации, но не заменяют семантическую разметку. Используйте их для вспомогательных данных, не влияющих на основное содержание.