Время и дата в HTML: тег time и атрибут datetime (HTML)

На веб-страницах даты и время встречаются постоянно: дата публикации статьи, время начала мероприятия, срок действия акции, продолжительность видео. Часто их выводят обычным текстом — и этого достаточно для человека. Но браузер, поисковый робот и вспомогательные технологии такой текст «не понимают»: для них «21 сентября» и «21.09» — просто набор символов без точного смысла.

Чтобы решить эту задачу, в HTML существует тег <time> с атрибутом datetime. Он позволяет одновременно показать человеку привычную надпись и передать машине точное значение в стандартизированном формате.

Что такое <time> и зачем он нужен

Тег <time> — строчный семантический элемент. Он не добавляет визуального оформления и не меняет отображение текста. Его единственная задача — связать видимый текст с машиночитаемым значением даты, времени или длительности.

Без <time> браузер видит просто текст:

<p>Статья опубликована 5 марта 2024 года.</p>

С <time> браузер получает точку отсчёта:

<p>Статья опубликована
  <time datetime="2024-03-05">5 марта 2024 года</time>.</p>

Видимый результат не меняется, но теперь программа может извлечь конкретную дату и работать с ней: сортировать, фильтровать, предлагать добавить в календарь.

Атрибут datetime: формат и правила

Атрибут datetime принимает значения в формате ISO 8601 — международном стандарте записи даты и времени. Если атрибут не указан, браузер попытается разобрать текст внутри тега, но это работает только когда содержимое само по себе соответствует ISO 8601. Надёжнее всегда задавать datetime явно.

Только дата

Запись в порядке год-месяц-день:

<time datetime="2024-07-15">15 июля</time>

Можно указать только год и месяц:

<time datetime="2024-07">в июле 2024 года</time>

Или только год:

<time datetime="2024">в 2024 году</time>

Только время

Часы и минуты через двоеточие:

<time datetime="14:30">14:30</time>

С секундами:

<time datetime="14:30:45">14:30:45</time>

Дата и время вместе

Дата и время разделяются заглавной буквой T:

<time datetime="2024-07-15T14:30">15 июля, 14:30</time>

С часовым поясом

Смещение относительно UTC указывается после времени:

<time datetime="2024-07-15T14:30+06:00">15 июля, 14:30 (Омск)</time>

Также можно использовать Z для UTC:

<time datetime="2024-07-15T08:30Z">15 июля, 08:30 UTC</time>

Длительность

Формат P (период) позволяет записать промежуток времени:

<time datetime="PT1H30M">1 час 30 минут</time>

Пример с днями (требуется T перед часами):

<time datetime="P2DT4H30M">2 дня 4 часа 30 минут</time>

Как браузер и другие системы используют datetime

Поисковые системы

Google и Яндекс извлекают даты публикаций и событий из <time datetime="...">. Это влияет на то, как дата отображается в сниппете результата поиска. Если дата записана обычным текстом в разных форматах, поисковик может определить её неточно или не определить вовсе.

Доступность

Скринридеры при чтении страницы могут опираться на значение datetime, а не на текст внутри тега. Это помогает пользователю с нарушениями зрения получить точную информацию о дате, даже если видимый текст сокращён или нестандартен.

JavaScript

В скриптах значение datetime доступно через свойство dateTime ( camelCase ) или getAttribute('datetime'):

const el = document.querySelector('time');
const value = el.dateTime; // "2024-07-15T14:30"
const date = new Date(value); // объект Date для расчётов

Это надёжнее, чем пытаться разобрать произвольный текст регулярными выражениями.

Календари и интеграции

Некоторые браузеры и приложения предлагают добавить событие в календарь, если на странице корректно размечена дата и время через <time>. Без атрибута datetime такая возможность не возникает.

Что нельзя делать

Не существует тега <datetime>. Это атрибут, а не самостоятельный элемент. Правильно только так:

<time datetime="2024-07-15">15 июля</time>

Нельзя писать в datetime произвольный текст. Значение должно строго соответствовать ISO 8601. Строки вроде datetime="15 июля" или datetime="15/07/2024" невалидны и браузер их проигнорирует.

Не стоит заменять <time> обычным <span>. Технически можно вывести дату через <span> и добавить data-атрибут, но тогда теряется семантика: ни валидатор, ни скринридер, ни поисковик не поймут, что это именно дата.

Нельзя вкладывать блочные элементы внутрь <time>. Тег строчный, поэтому внутри него уместны только текст и другие строчные элементы. <div> или <p> внутри <time> — ошибка структуры.

Практические примеры

Карточка события

<article>
  <h2>Воркшоп по HTML</h2>
  <p>
    Когда:
    <time datetime="2024-09-20T18:00+06:00">20 сентября, 18:00 (Омск)</time>
  </p>
  <p>
    Длительность:
    <time datetime="PT2H">2 часа</time>
  </p>
</article>

Лента публикаций

<ul>
  <li>
    <article>
      <h3>Как работает CSS Grid</h3>
      <p>Опубликовано:
        <time datetime="2024-03-12">12 марта 2024</time>
      </p>
    </article>
  </li>
  <li>
    <article>
      <h3>Семантика HTML5</h3>
      <p>Опубликовано:
        <time datetime="2024-04-03">3 апреля 2024</time>
      </p>
    </article>
  </li>
</ul>

Комментарий с точным временем

<div class="comment">
  <p>Отличная статья, спасибо!</p>
  <footer>
    Автор: Иван —
    <time datetime="2024-07-15T09:42+06:00">15 июля, 09:42</time>
  </footer>
</div>

Когда <time> не нужен

Если дата используется в декоративном или произвольном контексте, где точное значение не имеет значения для машинной обработки, тег можно не использовать. Например:

<p>Мы открыты с понедельника по пятницу.</p>

Здесь нет конкретной даты, и <time> ничего не добавит. Но как только появляется точка во времени — конкретный день, час или период — <time datetime="..."> становится полезным.

Итог

1. Используйте тег <time>, а не <datetime>.
2. В атрибут datetime пишите значение в формате ISO 8601.
3. Видимый текст может быть любым — его задача быть понятным человеку.
4. Дата записывается как ГГГГ-ММ-ДД, время — ЧЧ:ММ:СС.
5. При объединении даты и времени разделяйте их буквой T.
6. Часовой пояс указывайте как смещение +ЧЧ:ММ или Z для UTC.
7. Для длительности используйте формат PT с буквами H, M, S.
8. Не вкладывайте внутрь <time> блочные элементы.