Атрибут datetime тега <time>

Описание

Атрибут datetime в теге <time> указывает машинно-читаемую дату/время, в то время как содержимое тега может быть человеко-читаемым представлением. Это важно для семантической разметки временных данных.

Пример использования:
<p>Событие состоится <time datetime="2025-12-31T23:59:00+03:00">31 декабря в канун Нового года</time></p>

Форматы значений:

Тип даты/времени Формат Пример
Только дата YYYY-MM-DD datetime="2025-12-31"
Дата и время YYYY-MM-DDThh:mm:ss±hh:mm datetime="2025-12-31T23:59:00+03:00"
Только время hh:mm:ss datetime="23:59:00"
Продолжительность PnYnMnDTnHnMnS datetime="P1DT2H30M" (1 день 2 часа 30 минут)

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

  • Позволяет машинам точно интерпретировать дату/время
  • Не влияет на визуальное отображение
  • Может использоваться с пустым тегом <time>
  • Поддерживается поисковыми системами для структурированных данных

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

  • Всегда указывайте временную зону для точных событий
  • Используйте 24-часовой формат времени
  • Для исторических дат укажите календарную систему (если отличается от григорианской)
  • Сочетайте с микроразметкой Schema.org

Пример с микроразметкой:

<div itemscope itemtype="http://schema.org/Event"> <h2 itemprop="name">Новогодний корпоратив</h2> <p>Дата: <time itemprop="startDate" datetime="2025-12-31T19:00+03:00">31 декабря в 19:00</time></p> </div>

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

  • Нет встроенной валидации формата
  • Браузеры не преобразуют формат автоматически
  • Ограниченная поддержка в очень старых браузерах

Примечание: Для сложных временных данных:

  • Используйте JavaScript-библиотеки (moment.js, date-fns)
  • Рассмотрите Web Components для временных интервалов
  • Добавляйте иконки календаря/часов для наглядности