<time>

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

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

Кратко

Секция статьи "Кратко"

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