Атрибут data-* тега <time>
Описание
Атрибуты data-* в теге <time> позволяют хранить дополнительную информацию, связанную с временными данными. Эти пользовательские атрибуты не влияют на отображение, но могут быть использованы JavaScript или CSS.
<time datetime="2025-12-31T23:59"
data-event-type="holiday"
data-reminder="true">
Новогодняя ночь
</time>
Основные применения:
- Метаданные: Тип события, важность
- Интеграция: Связь с JavaScript-фреймворками
- Кастомизация: Дополнительные параметры отображения
- Микроразметка: Расширенные данные для поисковых систем
Пример с JavaScript:
<time id="event-time"
datetime="2025-12-31"
data-event-id="xmas-2025"
data-format="long">
Рождество
</time>
<script>
const timeElement = document.getElementById('event-time');
const eventId = timeElement.dataset.eventId; // "xmas-2025"
const format = timeElement.dataset.format; // "long"
if(format === 'long') {
timeElement.textContent = '25 декабря 2025 года';
}
</script>
Пример с CSS:
<style>
time[data-event-type="holiday"] {
color: #d63384;
font-weight: bold;
}
time[data-reminder="true"]::after {
content: " ⏰";
}
</style>
<time datetime="2025-12-31" data-event-type="holiday" data-reminder="true">
Новый год
</time>
Рекомендации:
- Используйте осмысленные имена атрибутов
- Придерживайтесь kebab-case стиля именования
- Для сложных данных используйте JSON в атрибуте
- Документируйте используемые data-атрибуты
Ограничения:
- Значения всегда хранятся как строки
- Нет встроенной валидации данных
- Избыточное использование может усложнить код
Примечание: Для сложных временных данных:
- Используйте JavaScript-библиотеки (moment.js, date-fns)
- Рассмотрите Web Components для интерактивных элементов
- Интегрируйте с календарными API