Обзор HMTL5 элемента time

От автора: Время – одна из немногих известных нам вещей, которая является бесконечной. Люди, также, как и животные и растения, зависят от времени, начиная с самого их появления.

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

До появления HTML5 в нашем распоряжении не было элемента для семантической разметки даты или времени. За последние годы другие решения, наиболее известные из них – Microformats и Microdata – попытались восполнить отсутствие подобного элемента для определенных ситуаций (дата рождения, публикация книги и т.д.). В данной статье я собираюсь рассмотреть HTML5 элемент time, который помогает решить только что обозначенную проблему.

Что такое элемент time?

Элемент time был представлен в спецификации HTML5 в 2009 году. Затем в 2011 году он был заменен элементом data. Затем элемент time снова появился в усовершенствованном виде, позволяющем использовать новые форматы даты/времени. Исходя из этого, можно сделать вывод о том, что спецификации могут быть довольно противоречивыми.

Элемент time представляет дату и/или время по Григорианскому календарю. Он является строчным элементом (как элементы span и a) и должен иметь закрывающий тег (как элементы div и span). Когда мы используем его в самом простом виде, содержимое данного элемента должно представлять собой валидную (правильного формата) строку с указанием даты и/или времени. Пример использования представлен ниже:

В данном примере я определяю дату, в частности 1ое февраля 2009 года. Формат представления, использованный в коде (yyyy-mm-dd), должен быть вам знаком, если вы немного знакомы с операционной системой Linux, но далее мы увидим, что это не единственный валидный формат.

В первом черновом варианте спецификаций, формат точных дат был одним из нескольких доступных форматов, которые вы могли использовать. Например, вы не могли указать такие даты, как «Ноябрь 2014» или «476» (начало Средневековья). А это было важным вопросом для нескольких случаев, таких как определение даты написания картины или датирование исторического события, т.е. в случаях, когда точная дата неизвестна.

К счастью, данный тип указания даты теперь разрешен в спецификации. Так что сегодня мы можем описывать нужный нам месяц года без указания дня:

Атрибут datetime

В спецификации элемента time также был стандартизирован атрибут под названием datetime. Указание дат в том формате, который описан выше, подходит к некоторым странам/культурам, но является неприемлемым для других. Например, в Италии даты указывают с использованием формата dd/mm/yyyy. Таким образом, дата, представленная в другом формате, может ввести жителей Италии в заблуждение.

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

Фактически, если атрибут datetime не указан, содержимое должно быть представлено в одном из валидных форматов представления даты/времени. А если указан, то содержимое можно представлять, как нам захочется. Это здорово, т.к. позволяет нам писать следующий код:

Или даже:

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

На первый взгляд это может показаться странным. Но содержимое элемента time было предназначено для людей, а не для машин. Кроме того, этот факт способствует интернационализации дат:

В данном примере написано такое же сообщения, что и раньше, но уже на итальянском языке.

Атрибут pubdate

В первых черновых вариантах спецификации был описан атрибут pubdate у элемента time. Данный атрибут имел булевское (логическое) значение, указывающее на то, что заданная дата была датой публикации родительского элемента article или, при отсутствии родительского элемента article, всего документа. Например, вы можете написать:

В этом случае 5ое сентября 2014 года станет датой публикации данной «статьи». Я был большим фанатом этого атрибута, после знакомства с ним, но, к сожалению, он был убран из спецификации. Такое решение создало большую проблему, т.к. много людей (и я в том числе) использовали дату публикации для определения свежести и релевантности статьи или новости. Несмотря на то, что мы все равно можем получить доступ к странице со статьей и узнать дату публикации, нам нужен стандартизированный способ указания такой даты для ее прочтения машиной.

В настоящий момент нет атрибута, заменяющего собой pubdate, но вы можете использовать схему постинга в блогах, в частности значение datePublished, как это показано ниже:

Теперь, после того, как вы получили полное представление об элементе time, давайте посмотрим на несколько допустимых форматов. Валидные форматы для содержимого элемента time при отсутствии атрибута datetime, а также форматы для самого атрибута datetime, описаны далее в этой статье.

Валидное указание месяца

Это должна быть строка, определяющая конкретный месяц года, в виде yyyy-mm. Например:

Валидное указание даты (день месяца)

Это должна быть строка, определяющая точную дату в yyyy-mm-dd. Например:

Валидное указание даты без указания года

Это должна быть строка, определяющая месяц и день, без указания года, в виде mm-dd. Например:

Валидное указание времени

Это должна быть строка, определяющая время без даты и использующая 24-часовой формат, в виде HH:MM[:SS[.mmm]]:

Пример приведен ниже:

Другой пример:

Валидное указание текущей даты и времени

Данный формат представлен в спецификации W3C, но не в версии WHATWG. Это должна быть точная дата и время в формате yyyy-mm-ddTHH:MM[:SS[.mmm]] или yyyy-mm-dd HH:MM[:SS[.mmm]]. Например:

Валидное указание смещения часовых поясов

Это должна быть строка, определяющая смещение часовых поясов. Например:

Валидное указание мировой даты и времени

Это должна быть строка, определяющая полную дату, включая время и часовой пояс. Например:

Валидное указание недели

Это должна быть строка, определяющая неделю года. Например:

Валидное указание года

Это должна быть строка, определяющая год. Например:

Валидное указание продолжительности

Это должны быть строка, определяющая продолжительность. Продолжительность может начинаться с префикса «P», указывающего на период (англ. Period), и префикс «D», указывающий на дни (англ. Days). Например:

Если вам нужно еще больше конкретизировать период, то после префикса «D» вы можете добавить префикс «T», указывающий на время (англ. Time), префикс «H» для часов (англ. Hours), префикс «M» для минут (англ. Minutes) и префикс «S» для секунд (англ. Seconds). Вот так:

Данный формат позволит вам определить один или более компонентов продолжительности времени.

Ограничения

Текущая версия спецификации устанавливает некоторые ограничения на то, что вы можете определить с помощью элемента time. Одно из таких ограничений заключается в том, что вы не можете указать диапазон дат. Т.е. если вы пишете заметку о конференции, которая проходит на протяжении нескольких дней, например, с 26 июля 2014 года по 28 июля 2014 года, то вам нужно будет использовать два элемента time. Хороший пример, иллюстрирующий данную ситуацию, можно найти на странице с выступлениями на моем сайте, где я использую элемент time вот так:

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

Браузерная поддержка

Опираясь на статью об элементе time на сайте MDN, этот элемент поддерживается в:

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

Автор: Aurelio De Rosa

Источник:

Редакция: Команда webformyself.

Комментарии Вконтакте: