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

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

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

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

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

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

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

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

<!-- 1ое февраля 2009 года -->
<time>2009-02-01</time>

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

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

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

<!-- Январь 2014 года -->
<time>2014-01</time>

Атрибут datetime

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

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

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

Следующая встреча запланирована на <time datetime="2014-10">Октябрь</time>.

Или даже:

Следующая встреча запланирована на <time datetime="2014-10">следующий месяц</time>.

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

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

<!-- Тоже сообщение, что и до этого, но на итальянском -->
Il prossimo incontro è programmato per <time datetime="2014-10">il mese prossimo</time>.

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

Атрибут pubdate

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

<article>
  <h1>Хороший заголовок</h1>
  <p>Это содержимое отличной статьи.</p>
  <footer>
    <p>Статья опубликована <time datetime="2014-09-05" pubdate>5го сентября 2014 года</time>
  </footer>
</article>

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

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

<article itemscope itemType="http://schema.org/BlogPosting">
  <h1 itemprop="headline">Хороший заголовок</h1>
  <p itemprop="articleBody"> Это содержимое отличной статьи.</p>
 
  <footer>
    <p> Статья опубликована <time datetime="2014-09-05" itemprop="datePublished">5го сентября 2014 года</time>
  </footer>
</article>

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

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

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

<!-- Сентябрь 2014 года -->
<time>2014-09</time>

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

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

<!-- 16ое сентября 2014 года -->
<time>2014-09-16</time>

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

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

<!-- 29ое июня -->
<time>06-29</time>

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

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

H – это часы

M – это минуты

S – это секунды

m – это миллисекунды

Квадратные скобки указывают на необязательные параметры

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

<!-- 16 часов и 10 минут
    (или 4 часа и 10 минут pm) -->
<time datetime="16:10">день</time>

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

<!-- 18 часов, 20 минут и 30 секунд
    (или 6 часов, 20 минут и 30 секунд) -->
<time>18:20:30</time>

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

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

<!-- 16ое сентября 2014 года в 18 часов, 20 минут и 30 секунд -->
<time datetime="2014-09-16T18:20:30">Вторник в 18:20</time>

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

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

<!-- GMT+1 (как Италия) -->
<time>+01:00</time>

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

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

<!-- 16ое сентября 2014 года в 18 часов,
    20 минут и 30 секунд в 
    часовом поясе GMT+1 (как Италия) -->
<time>2014-09-16T18:20:30+01:00</time>

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

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

<!-- 18ая неделя 2014 года -->
<time>2014-W18</time>

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

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

<!-- 2014 год -->
<time datetime="2014">этот год</time>

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

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

<!-- Продолжительность в четыре дня -->
<time datetime="P4D">четыре дня</time>

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

<!-- Продолжительность в четыре дня, 
    четыре часа и три минуты -->
<time datetime="P4DT4H3M">четыре дня</time>

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

Ограничения

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

<time datetime="2014-06-26">26<span class="hidden">июля 2014</span></time>-<time datetime="2014-06-28">28 июля 2014</time>

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

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

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

Chrome 33+

Firefox 22+

Internet Explorer 9+

Opera 22+

Safari 7+

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

Автор: Aurelio De Rosa

Источник:

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree