<time>

Разметка для даты и времени — и для людей, и для роботов.

Время чтения: меньше 5 мин

Кратко

Скопировано

Элемент <time> служит для разметки дат, времени или периода времени: в содержимое тега идёт формат для человека, а в атрибут datetime версия для машин — поисковому роботу точно понравится 🙂

У <time> есть роль time. Это делает тег полезным не только для поисковых роботов, но и для скринридеров. Вспомогательные технологии не рассказывают пользователям, что это время, но зачитывают содержимое datetime в понятном человеку формате.

Пример

Скопировано

Так можно указать конкретную дату:

        
          
          Дока вышла в релиз <time datetime="2021-10-12">12 октября 2021</time>
          Дока вышла в релиз <time datetime="2021-10-12">12 октября 2021</time>

        
        
          
        
      

Добавим время и зону:

        
          
          Челябинский метеорит вошёл в земную атмосферу<time datetime="2013-02-15T09:20+06:00">  15 февраля 2013 около 09:20</time>
          Челябинский метеорит вошёл в земную атмосферу
<time datetime="2013-02-15T09:20+06:00">
  15 февраля 2013 около 09:20
</time>

        
        
          
        
      

А так можно указать временной интервал:

        
          
          Самый длинный клип Twenty One Pilots на песню Level of Concern длится<time datetime="117d 16h 10m 25s">177 дней, 16 часов, 10 минут и 25 секунд</time>
          Самый длинный клип Twenty One Pilots на песню Level of Concern длится
<time datetime="117d 16h 10m 25s">177 дней, 16 часов, 10 минут и 25 секунд</time>

        
        
          
        
      

Как пишется

Скопировано

Вся магия элемента кроется в атрибуте datetime, который принимает значение формата
YYYY-MM-DDThh:mm:ssTZD.

  • YYYY: год 4 цифры (прим. 2009);
  • MM: месяц 2 цифры (прим. 05);
  • DD: день 2 цифры (прим. 04);
  • T: разделитель даты и времени, можно заменить пробелом;
  • hh: часы 2 цифры (прим. 18 для 06.00pm);
  • mm: минуты 2 цифры (прим. 34);
  • ss: секунды 2 цифры (прим. 40);
  • TZD: Обозначение часового пояса (прим. +02:00 для Каира).
        
          
          <time datetime="2021-07">Солнечный июль</time>
          <time datetime="2021-07">Солнечный июль</time>

        
        
          
        
      

Который можно опустить, если внутри тэга валидное значение атрибута datetime:

        
          
          <time>2021-07</time>
          <time>2021-07</time>

        
        
          
        
      
Открыть демо в новой вкладке

Как понять

Скопировано

С датами приходится работать регулярно: напоминания, сообщения, события… Представьте, что браузер или любой другой HTML-интерпретатор сможет распознать существующие даты на странице.

Это позволит:

  • добавить событие в календарь;
  • автоматически преобразовать дату в пользовательский формат, указанный браузером;
  • адаптировать дату и время в соответствии с временной зоной пользователя;
  • агрегаторам контента автоматически генерировать временную шкалу событий;
  • улучшить доступность даты и времени для считывающих программ;
  • поисковикам улучшать результаты выдачи на основе актуальности контента.

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

Примеры в машинном формате

Скопировано

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

Год и месяц

Скопировано

2014-06 — год перед месяцем.

Дата

Скопировано

1969-07-16 — год, месяц, потом день.

Дата без года

Скопировано

12-31 — месяц перед днём.

Только время

Скопировано

14:54:39.929 — час, минуты, потом секунды.

Секунды не обязательно. Доли можно указать тремя цифрами после точки.

Дата и время

Скопировано

2013-11-20T14:54 — комбинация даты и времени, разделяется заглавной T.

Временная зона

Скопировано

+06:00 — начинается с плюса или минуса. Двоеточие не обязательно.

+00:00, или UTC время, можно указать большой буквой Z.

Локальное время и дата

Скопировано

2019-12-31T23:59:59-02:00.

То же самое, что дата и время, только с временной зоной.

Год и неделя

Скопировано

2010-W21 — сначала год, потом количество недель после большой W.

Только год

Скопировано

1776 — 4 цифры или больше, работает и так 0001, и так 12345.

Длительность (способ 1)

Скопировано

P2DT2H30M10.501S — заглавная P, день (необязательно), заглавная T, дальше необязательные часы, минуты и секунды.

Все буквы должны быть заглавными.

Длительность (способ 2)

Скопировано

1w 2d 2h 30m 10.501s — неделя (w), день (d), час (h), минута (m) и секунда (s).

Буквы могут быть маленькими и большими. Пробелы не обязательны.