<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). Буквы могут быть маленькими и большими. Пробелы не обязательны.