<time>

Элемент <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.

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

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

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

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