Элемент `time`

0 ∞

Элемент <time> в HTML представляет собой машинно-читаемые дату, время, или длительность. Это можно использовать при создании расписания событий, архивирования и других функций, основанных на времени. WordPress использует элемент <time> в теме по умолчанию.

Reddit также использует этот элемент:

Reddit использует элемент <time> для простановки даты.

Содержание

Экскурс в историю

Путь элемента <time> оказался довольно тернист. Еще в 2009 году он был добавлен в спецификацию HTML5. Два года спустя, в 2011 году, спецификация была пересмотрена и этот элемент заменили элементом <data>, который обладает гораздо более широкой областью применения.

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

Теги и атрибуты

<time> - один из HTML-тегов. Ниже пример отображения даты Ноябрь 2011:

<time>2011-11</time>
Элемент textarea

Текст внутри похож на корректный атрибут тега datetime (по-крайней мере, на текущий момент). Но это не обязательно должно быть именно так. Вы можете переместить этот текст внутрь атрибута datetime и использовать любой другой:

<time datetime="2011-11">Холодный зимний месяц</time>

Атрибут элемента datetime делает элемент time уникальным. Он представляет собой дату, время, или длительность, выраженные в тексте, который читабелен компьютером. Понятным для компьютера, а не для человека, заметьте! Очень специфичный формат.

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

<time datetime="2011-11">Ноябрь, 2011</time>

10 вариантов отображения

Есть несколько стандартных вариантов форматирования атрибута datetime.

Год и месяц:

2014-06

Очень просто. Значение года предшествует значению месяца.

Дата:

1969-07-16

Год, месяц, и затем день.

Дата без значения года:

12-31

Месяц отображается прежде, чем год.

Только время:

14:54:39.929

Часы, минуты и затем секунды. Секунды опциональны. В значении «Доли секунды» можно использовать до трех цифр.

Дата и время:

2013-11-20T14:54

Сочетание значений даты и времени, разделенных заглавной "T". Заглавная "T" может быть заменена пробелом.

Смещение часового пояса:

+06:00
HTML-элемент link

Начинается со знака "+" или "-". Двоеточие (:) не обязательно. +00:00, или всемирное координированное время (UTC) может быть отображено с помощью заглавной "Z".

Местные дата и время:

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

То же самое, что и просто дата и время, только добавляется часовой пояс. И снова, заглавная "T" может быть заменена пробелом.

Год и неделя:

2010-W21

За значением года следует "W" с номером недели.

Только год:

1776

В значении должно быть больше, чем 4 цифры, потому `0001` и `12345` будет работать.

Длительность (метод первый):

P2DT2H30M10.501S

Заглавная "P", не обязательное значение дня, заглавная "T", затем не обязательные значения часов, минут и секунд. Все буквы заглавные.

Длительность (метод второй):

1w 2d 2h 30m 10.501s

Неделя (w), день (d), час (h), минута (m), и секунды (s). Могут быть использованы как заглавные, так и строчные буквы. Пробелы не обязательны.

Примеры

Релиз Google Gmail Blue состоялся <time datetime="2013-04-01">1 Апреля, 2013</time>.
Челябинский метеорит прошел сквозь атмосферный слой Земли в районе России <time datetime="2013-02-15T09:20+06:00">15 февраля 2013 около 09:20 ЕКТРБР(03:20 UTC)</time>.
Выполнение миссии Apollo 13 длилось <time datetime="5d 22h 54m 41s">5 дней, 22 часа, 54 минуты и 41 секунду</time>.

Проблемы с форматированием Datetime?

Используя это небольшую утилиту, вы можете вводить точное значение даты или времени (либо же оба значения сразу) и на выходе получать корректное значение дата-время.

Поддержка браузерами

Браузерная поддержка не главная проблема, если говорить об элементе <time>. Если браузер знаком с элементом - великолепно. Если нет - не беда, он будет рассматривать его как обычный inline-элемент. Атрибут datetime обрабатывается таким же образом.

Ниже представлен интерфейс DOM связанный с элементом time. Спецификация элемента dateTime доступна по ссылке на этот элемент:

<p>Концерт состоится  <time datetime="2001-05-15 19:00">15 мая</time>.</p> <script>   var time = document.getElementsByTagName("time")[0];   console.log(time.dateTime);   // outputs "2001-05-15 19:00" </script>
Когда следует использовать элемент Button

Эта конструкция поддерживается только в Firefox, и, в любом случае, она не особенно полезна, так как все что он делает - возвращает этот атрибут (он даже не возвращает значение, если при нем нет атрибута, причем текст является действующим значением, которое, казалось бы, должно нести некий смысл).

Какие же преимущества несет в себе использование элемента <time>?

Не сложно представить себе варианты использования однозначных дат на веб-страницах. Браузер может предложить добавлять события в календарь пользователя.

Тайский локализованный браузер может предложить превратить григорианские даты в даты тайской буддийской эпохи. «Японский» браузер сможет привести <time>16:00</time> в локализованный вид "16:00時". Агрегаторы контента могут использовать визуальные таймбары событий.

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

А после того, как мне позвонили из школы с вопросом, почему моих детей не было на занятиях, я повторно изучил ту страницу с расписанием. Мелким шрифтом в нижней части страницы были написаны слова «Опубликовано 5 января 2008».

Я надеюсь, что в будущем поисковые системы будут оценивать текущие страницы более высоко, когда поиск связан с текущими событиями.

И еще

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

  • Формат, удобный для понимания человеком;
  • Более детальный формат, ориентированный на понимание человеком;
  • Машиночитаемый формат.

Вот код на CodePen:

И еще

А это код Rails, который выводит различные форматы (STRFTIME очень удобный для этих целей инструмент):

<time    datetime="<%= @pen.created_at.strftime("%Y-%m-%dT%H:%M") %>"   title="<%= @pen.created_at.strftime("%Y-%m-%d at %I:%M %p") %>">     <%= @pen.created_at.strftime("%B %d, %Y") %> </time>

Вы уже используете в ваших проектах?