HMTL5 элемент time

Оцените материал
(0 голосов)

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

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

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

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

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

<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>.

Согласно спецификации в обоих примерах дата представлена в формате, непригодном для чтения машиной, но такая запись является допустимой благодаря атрибуту 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>Статья опубликована <timedatetime="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> Статья опубликована <timedatetime="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) -->
<timedatetime="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 часов,
2.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>

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

 

Прочитано 696 раз Последнее изменение Воскресенье, 19 февраля 2017 16:26
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Оставить комментарий

Убедитесь, что вы вводите (*) необходимую информацию, где нужно
HTML-коды запрещены

Поиск по сайту

Google+