9 июля 2014 в 20:03

Элемент HTML <time> перевод tutorial

Элемент <time> представляет собой дату, время или период времени, представленные в машинночитаемом формате. Он может быть полезен для создания расписаний, архивов или других функций, связанных со временем. WordPress использует этот элемент в базовой теме оформления. Ещё один пример использования <time> — Reddit:

image

Краткая история


Жизненный путь этого элемента был нелёгким. Его добавили в спецификацию HTML5 в 2009 году. Два года спустя, в 2011, его убрали и заменили на гораздо более широкий <data>. Однако в этом же году его вернули и добавили новых возможностей. Сейчас его можно уверенно использовать.

Ситуацию хорошо описал Брюс Лоусон (убрали, вернули, текущее положение дел). [Та же история на Хабре: убрали, вернули]. Классический пример того, как реакция сообщества разработчиков влияет на развитие HTML.

Тэг и атрибут


<time> можно использовать как обычный тег HTML. Вот простой пример, который представляет ноябрь 2011:

<time>2011-11</time>

В этом примере текст внутри тега является валидным значением атрибута datetime (о котором подробнее пойдёт речь дальше). Однако это совершенно необязательно. Это значение можно переместить в атрибут, указанный явно, а внутри тега использовать произвольный текст:

<time datetime="2011-11">A cold winter month many years ago</time>

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

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

<time datetime="2011-11">November, 2011</time>


10 способов указания времени


Существует множество разновидностей форматирования datetime.

Год и месяц

2014-06

Очень просто: год идёт перед месяцем.

Дата

1969-07-16

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

Дата без года

12-31

Месяц, затем день.

Только время

14:54:39.929

Часы, минуты, секунды. Секунды указывать необязательно. Доли секунды указываются с точностью до третьего знака.

Дата и время

2013-11-20T14:54

Комбинация даты и времени, разделённых заглавной «T». Букву «T» можно заменить на пробел.

Часовой пояс

+06:00

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

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

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

Дата и время с указанием часового пояса, вместо «T» можно использовать пробел.

Год и неделя

2010-W21

Год, затем заглавная «W» и номер недели.

Только год

1776

Должно быть четыре или больше цифр. Примеры корректных значений: "0001", "12345".

Временной интервал (первый способ)

P2DT2H30M10.501S

«P», затем опционально — количество дней, «T», затем опционально — количество часов, минут и секунд. Все буквы только в верхнем регистре.

Временной интервал (второй способ)

1w 2d 2h 30m 10.501s

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

Примеры


Google released Gmail Blue on <time datetime="2013-04-01">April 1st, 2013</time>.

The Chelyabinsk meteor entered Earth's atmosphere over Russia on <time datetime="2013-02-15T09:20+06:00">15 February 2013 at about 09:20 YEKT (03:20 UTC)</time>.

The Apollo 13 mission lasted a total of <time datetime="5d 22h 54m 41s">5 days, 22 hours, 54 minutes, and 41 seconds</time>.

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


Эта небольшая форма на CodePen поможет преобразовать значения даты и времени в корректный тег <time>:



Поддержка в брузерах


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

Есть ещё DOM-интерфейс связанный с элементом <time>. Через ссылку на элемент можно получить значение dateTime:

<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>
<script>
  var time = document.getElementsByTagName("time")[0];
  console.log(time.dateTime);
  // outputs "2001-05-15 19:00"
</script>

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

В чём преимущества использования <time>?


Здесь я процитирую Брюса Лоусона, так как, пожалуй, лучше и не скажешь:

Варианты использования однозначного указания даты придумать нетрудно. Браузер может предложить пользователю добавить событие на странице в его календарь. Браузер в Таиланде может автоматически преобразовать дату в григорианском календаре в традиционный буддийский. Японский браузер может показать <time>16:00</time> как «16:00時». Агрегаторы контента могут автоматически генерировать временную шкалу событий.

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

Ещё одна полезная мелочь


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

Этот приём используется на сайте CodePen:

image

А вот пример кода для Rails, который выводит время в этих трёх видах:

<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>
Автор оригинала: Ty Strong
Илья Сименко @ilya42
карма
528,7
рейтинг 0,0
full stack javascript developer
Самое читаемое Разработка

Комментарии (33)

  • +21
    Существует множество разновидностей форматирования datetime.

    Короче говоря, атрибут datetime должен содержать значение в формате ISO 8601.
    • +8
      скорее, значение, похожее на ISO 8601.
      While the formats described here are intended to be subsets of the corresponding ISO8601 formats, this specification defines parsing rules in much more detail than ISO8601. Implementors are therefore encouraged to carefully examine any date parsing libraries before using them to implement the parsing rules described below; ISO8601 libraries might not parse dates and times in exactly the same manner.
      пруф
      • +1
        Неожиданно. Спасибо за инфу.
  • +10
    Дело хорошее, особенно если пойдёт в массы (например, новостные сайты будут использовать регулярно). Вообще такая машиночитаемая разметка очень нужна вместо всякого эвристического текст-майнинга. Если ещё географические места сопровождать машиночитаемым текстом, легко сделать сервис, который будет наносить новости или анонсы событий на карту и отвечать на вопросы «что интересного произошло на прошлой неделе в радиусе 10 км от моего дома».
    • +1
      Не пытайтесь заменить бабушек на лавочке машинными сервисами!
  • –7
    HTML5 все больше и больше скатывается в маразм. Когда-нибудь он будет похоронен под завалами совершенно ненужных конструкций.
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        То есть как? А я им разделы и главы оформляю. Я что-то не так делаю?
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            Прикол в том, что модную фишку с определением ранга заголовков по вложенности по факту признали провалившейся


            Кто? Я использую в каждой секции <header><h1>…</h1></header> и стилизую, да, по уровню вложенности.
            • НЛО прилетело и опубликовало эту надпись здесь
              • 0
                Это он чертовски зря, и я не понимаю его резонов. А если мне нужно перенести фрагмент на другой уровень иерархии? Переименовывать все h1…h6? А если у меня больше шести уровней?
                • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            .
  • +4
    Судя по описанию это нужно исключительно для роботов, обычному пользователю и разработчику от этого мало толку.
    • +2
      А роботы как раз должны работать на благо обычных пользователей (:
    • +3
      Ну смотря какой разработчик… Есть такие которым всёравно на проект над которым работают. А есть которые стараются сделать лучше… Вот как раз для вторых и нужно…
      • +4
        Идейные люди тоже разные бывают, кто-то придерживается принципа KISS, а кто-то любит всё переусложнять.
  • –3
    Судя по двум верхним комментариям среди нас ещё есть динозавры)
    • 0
      У всего должна быть цель… кому-то цель показалась сомнительной. Бросаться на все новое нужно тоже осторожно… во всяком случае, уж точно нужно сначала понудеть.
  • +3
    надо выпилить хелпер time_tag из rails. зачэм он =), можно же написать вот так:

    <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>
  • +38
    Впервые только уяснил, что UTC расшифровывается… никак.
    Оказывается, это был компромисс между «Temps Universel Coordonné» и «Universal Coordinated Time». TUC + UCT = UTC.
    А вы знали?
  • +2
    Вот было бы здорово если японский браузер показывал <time>2014</time> как 平成26年, а мы в подсказке видели привычный нам год. (Вообще, конечно же, это работа сайта, а не браузера.)
  • +4
    В статье ещё не указано о большущей пользе правильного использования данного тега для A11y — доступности контента. И тут дело даже не только в пользователях с какими-либо ограничениями. Клиентское (пользовательское) программное обеспечение, которое использует контент веб-страниц может быть самым разнообразным. Это могут быть, как обычные веб-браузеры и браузеры предназначенные для людей с ограниченными возможностями, так и любые другие полезные и специализированные программы/устройства (плееры/читалки/холодильники/телевизоры и т. д.).

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

    Так же в статье опущен обзор атрибута pubdate — пустой атрибут тега <time>, наличие которого говорит о том, что в теге указанна дата/время публикации документа или статьи (например, когда <time> вложен в <article>).

    Семантически правильно построенные страницы сразу же становятся более доступными для большего круга пользователей, браузеров, краулеров и много другого. Например (как грубый пример), новостной сайт, может обойтись без RSS, если его каталог новостей построен с учётом современных возможностей семантической разметки контента. Точно так же можно сказать о каталоге подкастов, каталоге продуктов и т. д.
  • +1
    Не совсем понял вот это:
    Японский браузер может показать 16:00 как «16:00時».

    Судя по написанному выше, содержимое тега показывается как есть, а атрибут используется только роботами. Если же атрибут может использоваться и для замещения содержимого тега на локальный формат времени, то это должно регулироваться, т.к. не всегда это нужно. Или в этом примере Брюс подразумевал атрибут title?
  • 0
    > Японский браузер может показать 16:00 как «16:00時».
    16時00分
  • +3
    Странно, что так ограничен формат ввода часового пояса. И если для точных дат в прошлом это приемлемо, до для будущих не очень. Особенно в странах, где власти любят менять часовые пояса по зову, похоже, левой пятки.
  • +1
    Нативный календарь (вроде уже почти есть) и нативная функция для форматирования даты и времени — вот это круто было бы. Ты ей дату в формате ISO, а она тебе любые 16時00分…
  • –2
    Мне одному кажется, что машиночитаемый это int?

    Нафига опять 10 разных форматов, если есть число, а умный в 21-ом веке браузер возьмет и отрендерит это число в нужном пользователю формате, часовом поясе и тп?
    • НЛО прилетело и опубликовало эту надпись здесь
      • +1
        Справедливости ради стоит отметить, что стандарт, использующийся в datetime, точно так же не позволяет указать „абстрактный июль“, а только „конкретное число абстрактного июля“ или „конкретный июль конкретного года“.
  • +1
    Люблю тег <time>.

    Для вывода в человекочитаемый формат (и периодического обновления текста в этом теге) использую такой код: https://github.com/maximal/time.js.
    • 0
      О, спасибо!

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.